javascript - 如果文本写入输入然后被删除，blur() 不起作用 - jQuery

Question

我想检查用户是否写入了要输入的内容，然后根据情况添加类 .success 或 .warning。这些类仅更改边框颜色。这是我的代码:

$('#myForm input').blur(function (){
    if($(this).val() == '')
    {
        $(this).addClass('warning');
    }
});

$('#myForm input').keypress(function (){
    if($(this).val() != '')
    {
        $(this).addClass('success');
    }
});

如果我写一些文本来输入，它会将颜色更改为绿色，但是如果我删除该文本，那么颜色仍然是绿色(并且应该是红色)。谁能解释一下为什么会发生这种情况？

Answer 1

发生这种情况是因为一旦您写入任何值，就会添加class success，然后当您删除内容时，该类仍然存在并且仍然是绿色的。

您需要删除并添加:

$('#myForm input').blur(function (){
    if($(this).val() == '')
    {
        $(this).removeClass('success').addClass('warning');
    }
});

$('#myForm input').keypress(function (){
    if($(this).val() != '')
    {
        $(this).removeClass('warning').addClass('success');
    }
});

$('input').blur(function() {
  if ($(this).val() == '') {
 $(this).removeClass('success').addClass('warning');
  }
});
$('input').keypress(function() {
  if ($(this).val() != '') {
 $(this).removeClass('warning').addClass('success');
  }
});

:focus {
  outline: 0;
}
.warning {
  border: 2px solid purple;
}
.success {
  border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />