Javascript 更改时响应地检查输入元素

我有这个密码。当所选元素被聚焦时，它显然调用函数。然后，该函数检查所选元素的长度是否小于3，如果小于3，则会更改元素的背景色

$('#register-form input[type="text"]').focus(function(){
    if ($(this).length < 3) {
      $(this).css('background','#f00');
    }
});

现在的问题是，当输入中有超过4个字符时，颜色仍然保留。问题是当元素被聚焦时，它调用函数。之后，它不再检查if语句，因为显然不再调用该函数

我寻求的解决办法；我希望它在输入元素值更改后检查if语句是否仍然合法。或者任何其他平滑的方法来检查语句和调用是否在实时运行

这个问题的答案很简单，众所周知。但是，在回答时，请提供一些与此问题相关的信息；检查报表中各种变化的最佳方法是什么？让网站“活跃”并立即响应任何行动的最佳方法是什么

试试看：

编辑

就我个人而言，我经常使用AngularJS来处理具有大量这些特性的web应用程序。例如，您可以这样做：

<input type="text" ng-model="myValue" ng-style="{'background-color', myValue.length < 3 ? '#f00' : '#fff'}"/>

---

给这个错误一个类，并使用onkeyup和change，如果你愿意的话——这也会触发模糊

同时测试.val.length：

<style>
.error { background-color:red }
</style>

$('#register-form input[type="text"]').on("keyup,change",function(){
  $(this).toggleClass("error", $(this).val().length < 3);
}).keyup(); // trigger on load

---

$this.length返回的值是多少，即1汉克-我错过了。Fixed您是否介意将代码稍微更改为不在keyup上，而是在输入元素不再处于：focus规则下时触发的事件上？只需将“keyup，change”更改为“blur”，就可以随意使用blurMy bad。事实上，我需要同时使用模糊和关键帧，以使其正常工作

<style>
.error { background-color:red }
</style>

$('#register-form input[type="text"]').on("keyup,change",function(){
  $(this).toggleClass("error", $(this).val().length < 3);
}).keyup(); // trigger on load