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

【问题标题】：Applying JS function and event listener to multiple html elements将 JS 函数和事件监听器应用于多个 html 元素
【发布时间】：2018-02-23 10:09:23
【问题描述】：

我正在创建一个我在下面简化的表单，以直截了当，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>

【问题讨论】：

为什么？浏览器正在为你做这些
当我开始输入不是 onfocus 或 onclick 时，它会隐藏占位符。

标签： javascript html placeholder

【解决方案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 关键字，您可以访问触发事件的对象。

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

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

【讨论】：

谢谢。我使用了您的原始答案并使用 obj.getAttribute('id') 保留了占位符。

【解决方案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>

在模糊事件上我们需要传递占位符字符串，因为在焦点上我们将占位符设置为 " " 所以，在模糊事件上我们无法通过 getAttribute 方法获取占位符，因为它总是给null。

【讨论】：

【解决方案3】：

你可以为需要这个功能的输入设置一个通用类，例如，‘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');  
}

【讨论】：

【解决方案4】：

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

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>

【讨论】：