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

Answer 2

你可以这样做：

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

Answer 3

您可以命名您的功能并按名称设置它们。调用事件时，上下文设置为当前dom对象。因此，onfocus事件this内部等于您的字段，例如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;

Answer 4

您可以使用以下代码将所有输入元素放入数组中 var inputs = document.getElementsByTagName("input") for(input in inputs){ /*process input here.......*/ }

Answer 5

如果您只想展示喜欢＆＃34;请插入您的姓名＆＃34;，或者您可以使用input.placeholder轻松实现：

＆＃13;

<input type="text" id="name" placeholder="please insert your Name" /><br />
<input type="text" id="surname" placeholder="please insert your Surname" /><br />
<input type="text" id="email" placeholder="please insert Email" /><br />

＆＃13;

Answer 6

试试这样。

您可以通过按标签名称获取元素来绑定事件与所有输入元素，并且在附加事件时您也可以自定义错误文本。

var inputs = document.getElementsByTagName('input');
  for(i=0; i<inputs.length; i++) {
       inputs[i].addEventListener('focus', function(){ if (this.value != "" ){this.value ="";}}, false);
       inputs[i].addEventListener('blur', function(){if (this.value == "" ){ this.value = "Please insert your "+ this.id;}}, false);
   }

<input id="name">
<input id="surname">
<input id="email">

Answer 7

试试这个

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)"/>

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

7 个答案: