將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