JavaScript-从输入中删除焦点

Question

我有一个输入，该输入显示了无效的电子邮件格式的消息。尊重格式时，此消息消失了。

$('#id_email.form-control').keyup(function(){
$('span.error-keyup-email').remove();
var inputVal = $(this).val();
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(inputVal)){
  $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>');
}
});

代码效果很好。那正是我想要的。

问题：当我选择浏览器已保存的电子邮件时（通常，它将电子邮件或伪造为用户保存）。当我不输入电子邮件而选择电子邮件时，即使是正确的电子邮件格式，该消息仍然保留在输入下。

你有一个主意吗？

如果您愿意，我可以为您提供更多详细信息，并感谢您花时间在我的问题上：）

祝您有美好的一天：）

Answer 1

尝试以下：

$('#id_email.form-control').on('input', function(){
$('span.error-keyup-email').remove();
var inputVal = $(this).val();
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(inputVal)){
  $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>');
}
});

keyup 仅在按下键后才触发。输入当值更改

Answer 2

问题是，在浏览器中使用Autofill时，您必须以某种方式检测到它。不幸的是，在这种情况下，未触发输入的更改事件。

可能的解决方案可能是遍历所有输入字段onload，并检查它们是否填充

Answer 3

//删除错误跨度

$('#id_email.form-control').keyup(function(){
    $('span.error-keyup-email').remove();
    var inputVal = $(this).val();
    var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
    if(!emailReg.test(inputVal)){
      $(this).after('<span style="color:red;" class="error error-keyup-email">Invalid Email Format.</span>');
    }
  else{
      $('span.error-keyup-email').remove();
  }
    });

Answer 4

使用输入更改事件，该事件当焦点丢失时称为自动

$('#id_email.form-control').change(function(){
});