0

このコードを機能させることができません。すべての入力フィールドをターゲットにしてonblurとonfocus効果を持たせようとしていますが、まったく成功しません。助けてください。

getElementsByClassNameも使用してみましたが、うまくいきませんでした... :(

var inputArray = new Array( "ans01", "ans02", "ans03", "ans04", "ans05", "ans06" );     
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";
   }
};
4

2 に答える 2

2

いくつかの問題があります。まず、関数を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";
        }
    }
}
于 2012-07-29T13:37:24.580 に答える
0

タイプミスがあります：

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

この行を次のように変更します。

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

変化がわかりますか？

また、ループ内でonfocusand関数を割り当てる必要があります。そうしないと、最後の入力のみが機能します。onblur

var inputArray = new Array( "ans01", "ans02", "ans03", "ans04", "ans05", "ans06" );     
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";
       }
    };
}

getElementsByTagName("input");ジョンがコードで示したように、すべての<input>要素を取得するために使用するのが賢明かもしれません。

于 2012-07-29T13:35:24.060 に答える