javascript - 如何使用验证器立即更改表单背景颜色？

Question

我有另一个关于 Javascript 的基本问题，但我无法让它工作。

我有一个像这样的红色背景的表格：

<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 个字符后立即更改背景颜色。我知道这可以通过提交按钮进行更改，但我希望在您输入内容后立即拥有它。

Answer 1

您需要使用keyuporkeydown事件：

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：您可能想使用您最喜欢的库来处理跨浏览器事件问题。上面的代码适用于表现良好的浏览器。