将JS函数和事件侦听器应用于多个html元素

Question

我正在创建一个表单，我在下面简化以直截了当，JS代码是控制占位符; 隐藏在焦点上并重新出现在模糊上，显然这现在仅适用于带有id（'Name'）的输入。 如何将这些函数应用于所有输入元素DRY，而不重复每个输入的代码。

 var x = document.getElementById("Name"); x.addEventListener("focusin", myFocusFunction); x.addEventListener("focusout", myBlurFunction); function myFocusFunction() { document.getElementById('Name').placeholder= ''; } function myBlurFunction() { document.getElementById('Name').placeholder= 'Name'; }

 <div id='card'> <input id='Name' type='text' placeholder='Name'/> <input id='Age' type='text' placeholder='Age'/> <input id='Sex' type='text' placeholder='Sex'/> <input id='Occupation' type='text' placeholder='Occupation'/> </div>

Answer 1

 Array.from(document.getElementsByTagName("input")).forEach(input => { input.addEventListener("focusin", focus); input.addEventListener("focusout", blur.bind(input, input.placeholder)); }); function focus() { this.placeholder = ''; } function blur(placeholder) { this.placeholder = placeholder; }

 <div id='card'> <input id='Name' type='text' placeholder='Name' /> <input id='Age' type='text' placeholder='Age' /> <input id='Sex' type='text' placeholder='Sex' /> <input id='Occupation' type='text' placeholder='Occupation' /> </div>

使用this关键字可以访问触发事件的对象。

此外，您需要以某种方式保留占位符，在上面的示例中，我使用了绑定函数，但您可以选择自己的方式。

您还可以找到如何在此答案的修订版2中手动指定名称的示例。

Answer 2

试着做这个

  <!DOCTYPE html> <html> <body> <div id='card'> <input id='Name' type='text' placeholder='Name' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Name')" /> <input id='Age' type='text' placeholder='Age' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Age')" /> <input id='Sex' type='text' placeholder='Sex' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Sex')" /> <input id='Occupation' type='text' placeholder='Occupation' onfocusin="myFocusFunction(event)" onblur="myBlurFunction(event,'Occupation')" /> </div> <script> function myFocusFunction(event) { var element = event.target.getAttribute('id'); document.getElementById(element).placeholder= ''; } function myBlurFunction(event,placeHolder) { var element = event.target.getAttribute('id'); document.getElementById(element ).placeholder= placeHolder ; } </script> </body> </html>

在blur事件中，我们需要传递占位符字符串，因为在焦点上我们将占位符设置为“”因此，在blur事件中，我们无法通过getAttribute方法获取占位符，因为它始终为null。

Answer 3

你可以给元素一个类，然后迭代

 document.querySelectorAll('.placeholder').forEach(function(el) { el.addEventListener("focusin", myFocusFunction); el.addEventListener("focusout", myBlurFunction); }); function myFocusFunction() { document.getElementById('Name').placeholder = ''; } function myBlurFunction() { document.getElementById('Name').placeholder = 'Name'; }

 <div id='card'> <input id='Name' class="placeholder" type='text' placeholder='Name' /> <input id='Age' class="placeholder" type='text' placeholder='Age' /> <input id='Sex' class="placeholder" type='text' placeholder='Sex' /> <input id='Occupation' type='text' placeholder='Occupation' /> </div>

Answer 4

您可以为需要此功能的输入设置公共类，例如“add-tip”，然后：

var x = document.querySelectorAll(".add-tip");
for (var i=0;i< x.length;i++) {
    x[i].addEventListener("focusin", myFocusFunction);
    x[i].addEventListener("focusout", myBlurFunction);
}
function myFocusFunction(e) {
    e.target.setAttribute('placeholder','');  
}

function myBlurFunction(e) {
    e.target.setAttribute('placeholder','Name');  
}

将JS函数和事件侦听器应用于多个html元素

问题描述

4 个解决方案

解决方案1
2 已采纳 2017-09-14 12:18:52

解决方案2
1 2017-09-14 12:35:24

解决方案3
0 2017-09-14 12:19:42

解决方案4
0 2017-09-14 12:20:35

将JS函数和事件侦听器应用于多个html元素

问题描述

4 个解决方案

解决方案1 2 已采纳 2017-09-14 12:18:52

解决方案2 1 2017-09-14 12:35:24

解决方案3 0 2017-09-14 12:19:42

解决方案4 0 2017-09-14 12:20:35

解决方案1
2 已采纳 2017-09-14 12:18:52

解决方案2
1 2017-09-14 12:35:24

解决方案3
0 2017-09-14 12:19:42

解决方案4
0 2017-09-14 12:20:35