-1

Javascript に関するおそらく基本的な質問がもう 1 つありましたが、それを機能させることができません。

次のような赤い背景のフォームがあります。

<form >
<input type="text" style="background-color:#F00;" id="blok1"/> <br>
<input type="text" style="background-color:#F00;" id="blok2"/> <br>
<input type="text" style="background-color:#F00;" id="blok3"/> <br>
<input type="text" style="background-color:#F00;" id="blok4"/> <br>
<input type="text" style="background-color:#F00;" id="blok5"/> <br>
<input type="text" style="background-color:#F00;" id="blok6"/> <br>
</form>

問題は、テキストボックスに2文字以上入力するとすぐに背景色を変更したいということです。これは送信ボタンで変更できることは知っていますが、何かを入力するとすぐに変更したいのです。

4

1 に答える 1

2

keyupまたはkeydownイベントを使用する必要があります。

var inputs = document.getElementsByTagName('input');

for (var i=0; i<inputs.length; i++) {
  inputs[i].addEventListener('keyup', function(evt) {
    var input = evt.target;
    if (input.value.length > 2) {
      input.style.backgroundColor = '#0F0';
    } else {
      input.style.backgroundColor = '#F00';
    }
  });
}

デモ: http://jsbin.com/oSiroHo/1/edit

PS: お気に入りのライブラリを使用して、クロスブラウザー イベントの問題に対処することをお勧めします。上記のコードは、行儀の良いブラウザーで機能します。

于 2013-11-12T13:38:05.823 に答える