试图用javascript将我的所有输入字段作为目标

Trying to target all my input field in javascript

本文关键字：字段 输入 目标 javascript 我的      更新时间：2024-05-02

我无法让这个代码发挥作用，我正试图将我的所有输入字段设置为具有onblur和onfocus效果，但根本没有成功。请帮帮我。

我还尝试使用getElementsByClassName，但没有成功…：（

var inputArray = new Array( "answers01", "answers02", "answers03", "answers04", "answers05", "answers06" );     
for( var i = 0; i < inputArray.length; i++ ) {
   answerInput = document.getElementById(inputArray[x]).value;
}       
var inputField = answerInput;
inputField.onfocus = function() {
   if (inputField.value == "Place your answer here") {
      inputField.value = "";
   }
};
inputField.onblur = function() {
   if (inputField.value == "") {
      inputField.value = "Place your answer here";
   }
};

有一些问题。首先，您需要将函数移动到for循环中。否则，它们将仅附加到最后一个输入框。其次，不应该在函数中使用input.value，而应该使用this.value。在事件处理程序中，"this"指的是触发事件的元素。

以下是适用于我的完整代码：

var inputArray = document.getElementsByTagName("input");
for (var i = 0; i < inputArray.length; i++ )  {
    answerInput = inputArray[i];
    answerInput.onfocus = function() {
        if (this.value == "Place your answer here") {
            this.value = "";
        }
    }
    answerInput.onblur = function() {
        if (this.value == "") {
            this.value = "Place your answer here";
        }
    }
}

您有一个打字错误：

   answerInput = document.getElementById(inputArray[x]).value;

将此行更改为：

   answerInput = document.getElementById(inputArray[i]).value;

你能发现零钱吗？

此外，您应该在循环中分配onfocus和onblur函数，否则只有最后一个输入才能工作。

var inputArray = new Array( "answers01", "answers02", "answers03", "answers04", "answers05", "answers06" );     
for( var i = 0; i < inputArray.length; i++ ) {
    answerInput = document.getElementById(inputArray[i]).value;
    var inputField = answerInput;
    inputField.onfocus = function() {
       if (inputField.value == "Place your answer here") {
          inputField.value = "";
       }
    };
    inputField.onblur = function() {
       if (inputField.value == "") {
          inputField.value = "Place your answer here";
       }
    };
}

正如John在他的代码中所展示的那样，使用getElementsByTagName("input");获取所有<input>元素可能是明智的。

相关文章：