我正在学习一些Javascript，并将其合并到另一个项目中。我有一些输入字段maxlength设置为20。目前，通过CSS为它们设置了边框：
.textInput:focus {
border: 2px solid green;
}
我希望当用户达到maxlength极限时输入字段的边框变为红色-我已经实现了这一部分：
$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
document.getElementById('newsTitle').style.borderColor = "red";
}
});
但是，如果用户要删除一些文本或退格键，我希望边框变回绿色。有人可以给我一些如何做的指示吗？
如果有更有效的方法来实现我到目前为止的目标，请告诉我。我觉得我的方法有点笨重，如果在if语句中使用了元素ID，则无需两次给出该元素ID，这适用于所讨论的元素ID。
干杯，
插口
我实际上会这样做：
$(function() {
$("#newsTitle").keydown(function() {
$(this).toggleClass('invalid', $(this).val().length >= 20);
});
});.textInput:focus {
border: 2px solid green;
}
.textInput.invalid,
.textInput.invalid:focus {
border: 2px solid red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textInput" id="newsTitle">本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句