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

您需要使用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';
    }
  });
}

DEMO：http://jsbin.com/oSiroHo/1/edit

PS：您可能希望使用自己喜欢的库来处理跨浏览器事件问题。上面的代码适用于行为良好的浏览器。

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

1 个答案: