jQuery blur&focus 在 IE 或 Chrome 中的区别答案

【问题标题】：jQuery blur&focus in IE or Chrome differencejQuery blur&focus 在 IE 或 Chrome 中的区别
【发布时间】：2017-08-02 10:17:05
【问题描述】：

<html>
<head><title>asdf</title></head>
<body>
<input type="text" id="WTF">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $("#WTF").blur(function () {
        if($("#WTF").val() !== "WTF"){
            alert("WTF!");
            $("#WTF").focus();
        }
    });
</script>
</body>
</html>

喜欢这段代码。如果在 IE 中打开，可以在下次激活模糊事件之前正确触发一次警报。但是在Chrome中打开，可以看到alert无限触发。为什么？以及如何让Chrome正确激活事件？

【问题讨论】：

因此，在 chrome 中，alert 之后的焦点仍然在 input 上，因此您的 blur 会被反复触发。你有什么要求？你想在input 上做什么？
Emmm，我想在输入失去焦点时验证输入值。如果不通过，通过alert提示输入错误。最后将注意力集中在输入上。 ——就像这段代码。
我想知道为什么 IE 和 Chrome 处理方式不同

标签： jquery google-chrome internet-explorer

【解决方案1】：

所以你提到的事情是 Chrome 中的一个已知错误，你可以阅读更多关于它的信息here

您可以添加错误class 来代替alert，以向用户说明错误：

.error {
  border: 1px solid #d00;
}

<html>

<head>
  <title>asdf</title>
</head>

<body>
  <input type="text" id="WTF">

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $("#WTF").blur(function() {
      if ($(this).val() !== "WTF") {
        $(this).addClass('error');
      } else {
        $(this).removeClass('error');
      }
    });
  </script>
</body>

</html>

【讨论】：