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

我正在创建一个表单，我将其简化为直接指向的一点，JS代码用于控制占位符;隐藏在焦点上并重新出现在模糊上，显然这现在适用于仅具有id（'Name'）的输入。如何将这些函数应用于所有输入元素DRY，而不必为每个输入重复代码。将JS函数和事件侦听器应用于多个html元素

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>

来源

2017-09-14 A. Ahmed

为什么？浏览器正在为你做这件事 –

当我开始输入不是onfocus或onclick时，它会隐藏占位符。 –

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中找到如何手动指定名称的示例。

来源

2017-09-14 12:18:52

这应该是被接受的答案^^ –

谢谢。我用你原来的答案，并通过使用'obj.getAttribute（'id'）'保留占位符。 –

你可以给要素类，并反复

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>

来源

2017-09-14 12:19:42 adeneo

您可以设置一个公共类需要此功能，例如，“加尖”的投入，然后：

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'); 
}

来源

2017-09-14 12:20:35 JiangangXiong

尝试做IKE在此

<!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方法得到占位符，因为它总是给空值。

来源

2017-09-14 12:35:24

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

回答

相关问题