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

我有多个字段，需要对收到的每个输入都应用以下内容，如何编写它，这样就不必为每个输入字段继续编写相同的语句了？我相信这不是最有效的方法。

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";
    }
};

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

最佳答案

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

第二步使用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);
}