Chrome:模糊 - 警报 - 焦点序列导致无限警报循环

Question

考虑以下代码:

var input = document.getElementById("hello");
input.addEventListener('blur', function() {
  alert('hello');
  input.select();
  input.focus();
});

<input type="text" value="hello" id="hello" />

围绕它的想法是让用户专注于输入,直到他/她输入有效文本.这是代码的简化版本.

Js在这里小提琴:https://jsfiddle.net/wzwft49w/9/

问题:如果您专注于输入然后模糊它,您将在Chrome中获得无限警报弹出窗口,但不会在IE中获得.

你怎么解决这个问题？

2.为什么会发生这种情况的任何想法？

笔记:

• 我已经检查了这个问题但是在这种情况下修复不起作用:其他问题
• 这是一个与模糊和焦点相关的旧Chrome错误(不确定它是否与此有任何关系,尽管标记为已解决):Chrome bug

Answer 1

这是我的 chrome 解决方案：

var inputs = document.querySelectorAll("input"), 
    len = inputs.length, 
    i;
    var gflag=false;

    function myalert(m,o) {
        if (gflag) {
            return;
        }

        gflag=true;
        alert(m);
        o.focus();
        setTimeout(function() {gflag=false;},10);
    }
    
function makeBlurHandler() {
    "use strict";
    return function () {
      if (this.value === "") {
          myalert("Cannot be blank!",this);
          this.nextElementSibling.innerHTML = "Cannot be blank!";
      } else {
          this.nextElementSibling.innerHTML = "";
      }
    };
}

for (i = 0; i < len; i++) {
    inputs[i].addEventListener("blur", makeBlurHandler());
}

.errorMessage {
    color: red;
}

<p>
  <label for="userName">User Name:</label>
  <input type="text" id="userName">
  <span class="errorMessage"></span>
</p>
<p>
  <label for="passWord">Password:</label>
  <input type="text" id="passWord">
  <span class="errorMessage"></span> 
</p>

它也适用于 IE，但不适用于 Firefox，因为 focus() 无法正常工作。