javascript - 如何为每个输入标签使用相同的代码？

Question

我有多个字段，需要对获得的每个输入应用以下内容，我该如何编写它，以便不需要为每个输入字段编写相同的语句？我相信这不是最有效的方法。

var namefield = document.getElementById("name");
var surnamefield = document.getElementById("surname");
var emailfield = document.getElementById("email");

namefield.onfocus = function(){
    if (namefield.value != "" ){
        namefield.value ="";
    }
};

namefield.onblur = function(){
    if (namefield.value == "" ){
        namefield.value = "Please insert your name";
    }
};

因此，如果单击第一个输入，我应该得到“请插入您的姓名”，如果单击第二个输出，我应该得到“请插入您的姓氏”，依此类推。

Answer 1

第一步，为您的函数命名，以便可以将其作为引用传递，

第二步使用querySelectorAll一次性获取所有元素，然后循环

第三步，使用addEventListener，可选，但更干净。

function inputOnfocus = {
    if (this.value != "" ){
        this.value ="";
    }
};
function inputOnBlur(){
    if (this.value == "" ){
        this.value = "Please insert your " + this.title; 
        // note, will need to set title for each input
        // also, look into the placeholder attribute.
    }
};

var inputs = document.querySelectorAll('#name, #surname, #email');
for (var i= 0; i < inputs.length;i++) {
    inputs[i].addEventListener('focus',onInputFocus, false);
    inputs[i].addEventListener('blur',onInputBlur, false);
}