Question

我的输入和文本框有不同的占位符，如“代表数量”，“以秒为单位的时间”等。

<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>

我已经构建了一个click事件，因此无论何时单击任何框，其占位符都将变为空白，因此用户输入的值如下：

textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);

function checkInput(e){
  e.currentTarget.placeholder="";
}

^^制作了一个可以用于textarea和集合的单个函数

如果用户点击一个框但没有输入值并且移动到另一个项目（模糊事件），则可以通过对所有项目使用单个函数来获取占位符：< /强>

textarea.addEventListener("blur",originalValue); reps.addEventListener("blur",originalValue); function originalValue(e){ e.currentTarget.placeholder= default value/original value; }

Answer 1

试试这个文本框

＆＃13;

<input type="text" placeholder="Enter a value">

＆＃13;

正如您所看到的那样没有任何代码，它完全符合您的要求;如果用户输入任何文本，则删除占位符。如果用户未输入任何文本（或删除现有文本），则占位符将在模糊时恢复。

我真的不明白为什么你甚至开始围绕这个编写代码！

如果您只是想混淆用户，请在清除之前将占位符副本复制到元素中，然后在模糊时恢复。

＆＃13;

textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
textarea.addEventListener("blur",restore);
sets.addEventListener("blur",restore);

function checkInput(e){
  e.currentTarget.originalPlaceholder = e.currentTarget.placeholder
  e.currentTarget.placeholder="";
} 

function restore(e){
  e.currentTarget.placeholder = e.currentTarget.originalPlaceholder;
}

＆＃13;

<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>

＆＃13;

我认为这是一个可怕的想法FWIW！

对不同的DOM元素使用相同的函数

1 个答案: