更改输入边框颜色的 Javascript 代码

Question

我正在学习一些 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";
   }
});

但是，如果用户要删除一些文本或退格键，我希望边框返回到绿色。有人可以给我一些关于如何做到这一点的指示吗？

如果有更有效的方法来实现我目前所拥有的，请告诉我。我觉得我的方法有点笨重，如果元素 ID 在 if 语句中，则无需两次提供元素 ID，这适用于所讨论的元素 ID。

干杯，

jack

Answer 1

我实际上会这样做:

$(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">