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

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

您可以这样做：

var namefield = document.getElementById("name");
var surnamefield = document.getElementById("surname");
var emailfield = document.getElementById("email");
var inputArray = [namefield , surnamefield , emailfield ];

inputArray.forEach(function(element){
    element.onfocus = function(){
        if (element.value != "" ){
            element.value ="";
        }
    };

    element.onblur = function(){
        if (element.value == "" ){
            element.value = "Please insert your " + element.id;
        }
    };
});

您可以这样做：

var namefield = document.getElementById("name");
var surnamefield = document.getElementById("surname");
var emailfield = document.getElementById("email");
var inputArray = [namefield , surnamefield , emailfield ];

inputArray.forEach(function(element){
    element.onfocus = function(){
        if (element.value != "" ){
            element.value ="";
        }
    };

    element.onblur = function(){
        if (element.value == "" ){
            element.value = "Please insert your " + element.id;
        }
    };
});

---

您可以命名函数并按名称进行设置。调用事件时，将上下文设置为当前dom对象。因此，在onfocus事件

中，此

等于您的字段，例如

namefield

。最后，因为您使用的是半人可读的标识符，所以可以通过连接字段ID将其用作占位符字符串的一部分

function resetValue() {
    if (this.value != "" ){
        this.value ="";
    }
}

function insertPlaceholder() {
    if (this.value == "" ){
        this.value = "Please insert your " + this.ID;
    }
}

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

namefield.onfocus = resetValue;
namefield.onblur = insertPlaceholder;

surnamefield.onfocus = resetValue;
surnamefield.onblur = insertPlaceholder;

emailfield.onfocus = resetValue;
emailfield.onblur = insertPlaceholder;

---

您可以命名函数并按名称进行设置。调用事件时，将上下文设置为当前dom对象。因此，在onfocus事件

中，此

等于您的字段，例如

namefield

。最后，因为您使用的是半人可读的标识符，所以可以通过连接字段ID将其用作占位符字符串的一部分

function resetValue() {
    if (this.value != "" ){
        this.value ="";
    }
}

function insertPlaceholder() {
    if (this.value == "" ){
        this.value = "Please insert your " + this.ID;
    }
}

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

namefield.onfocus = resetValue;
namefield.onblur = insertPlaceholder;

surnamefield.onfocus = resetValue;
surnamefield.onblur = insertPlaceholder;

emailfield.onfocus = resetValue;
emailfield.onblur = insertPlaceholder;

---

您可以使用下面的代码将所有输入元素放入一个数组

var inputs=document.getElementsByTagName（“输入”）

---

对于（输入中的输入）{/*在此处处理输入……*/}

您可以使用以下代码将所有输入元素放入数组中

var inputs=document.getElementsByTagName（“输入”）

---

对于（输入中的输入）{/*在此处处理输入……*/}

如果您只想显示“请插入您的姓名”，或者您可以使用以简化操作：

如果您只想显示“请插入您的姓名”，或者您可以使用以简化操作：

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

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

函数inputInfo={
如果（this.value！=“”）{
此值为“”；
}
};
函数inputOnBlur（）{
如果（this.value==“”）{
this.value=“请插入您的”+this.title；
//注意，需要为每个输入设置标题
//另外，查看占位符属性。
}
};
var inputs=document.querySelectorAll（“#name，#姓氏，#email”）；
对于（变量i=0；i

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

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

函数inputInfo={
如果（this.value！=“”）{
此值为“”；
}
};
函数inputOnBlur（）{
如果（this.value==“”）{
this.value=“请插入您的”+this.title；
//注意，需要为每个输入设置标题
//另外，查看占位符属性。
}
};
var inputs=document.querySelectorAll（“#name，#姓氏，#email”）；
对于（变量i=0；i

像这样试试

通过按标记名获取元素，可以将事件与所有输入元素绑定，在附加事件时，还可以自定义错误文本

var inputs=document.getElementsByTagName（'input'）；
对于（i=0；i请这样尝试

通过按标记名获取元素，可以将事件与所有输入元素绑定，在附加事件时，还可以自定义错误文本


var inputs=document.getElementsByTagName（'input'）；
对于（i=0；i试试这个

function emptyPlaceholder(field){
    if (field.value != "" ){
        field.value ="";
    }

};

function setPlaceholder(field){
    if (field.value == "" ){
        field.value = "Please insert your " + field.name;
    }

};

还可以将onFocus和onblur添加到标记中

<input type="text" id="name" name="name" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>
<input type="text" id="surname" name="surname" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>
<input type="text" id="email" name="email" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>


试试这个

function emptyPlaceholder(field){
    if (field.value != "" ){
        field.value ="";
    }

};

function setPlaceholder(field){
    if (field.value == "" ){
        field.value = "Please insert your " + field.name;
    }

};

还可以将onFocus和onblur添加到标记中

<input type="text" id="name" name="name" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>
<input type="text" id="surname" name="surname" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>
<input type="text" id="email" name="email" onblur="setPlaceholder(this)" onfocus="emptyPlaceholder(this)"/>


这并没有解决他们为不同字段指定不同占位符的问题，并导致相同的两个函数分别创建三次。然后使用.forEach（）函数创建一个函数，该函数将接收一个输入元素并执行所有处理，并使用参数调用该函数。这并没有解决他们为不同字段指定不同占位符的问题，并导致相同的两个函数分别创建三次。然后使用.forEach（）函数创建一个函数，该函数将接收一个输入元素并执行所有处理，并使用参数调用该函数。