クローム：ブラー - - アラートシーケンスを焦点は無限警告ループ

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の無限の警告ポップアップを取得します。

1.この問題をどのように解決しますか？

2.これはどうして起こるのですか？

注：

• 私はすでにこの質問を確認したが、その修正は、この場合には動作しません：Other question
• はここで古いクロームブラーとフォーカスに関連バグ（ではない、それは持っていることができれば間違いないだろう解決として、それがマークされているものの、これを行うには何）：Chrome bug

Answer 1

ここでは、クロムのための私のソリューションです：

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のために起因焦点に（）が正しく機能していません。