將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元素

回答

相關問題