Javascriptのonblurイベントのアラートボックスが消えない

Question

私はブラーイベントを使用してJSアラートを発しています。私がイベントを呼び出している入力ボックスをクリックし、ブラウザやタブなどの新しいタブボタンをクリックして何も入力しないと、入力ボックスにぼかし効果があるため警告が表示されます。しかし、警報は、OKがクリックされても去ることを拒否します。ただし、同じページまたはブラウザタブ内のどこかをクリックしても、これは起こりません。次に、[OK]ボタンをクリックすると警告ボックスが閉じます。ユーザーがHTML

<input pattern=".{10,}" type='text' id='phone' name="Phone" maxlength="10" placeholder="Phone" <?php if(isset($_POST['Phone'])){echo "Value ='$_POST[Phone]'";}?> required> 

入力ボックスに貼り付けるためにどこかからデータをコピーする

を必要とするかもしれないので、新しいタブなどをクリックする必要があるJS

$('#phone').blur(function(){checkValue($(this).val());}); 

function checkValue(phval) { 
    var res = phval.substr(0, 1); 
    if (res!=="7" && res!=="8" && res!=="9") { 
     alert("Number has to be Mobile number starting with 7, 8 or 9/Your Value is "+phval); 
    } 
} 

に思えますいくつかの簡単な問題になる。しかし私は私の人生がそれを見つけることができません。

Answer 1

これは、私が問題を解決するために作成した答えよりも、回避策のほうが多く、T.J.Crowderがdivのような "Modal"を使用する提案からインスピレーションを受けています。

警告ではなく、ぼかしイベントでエラーdivのフェードを作成しました。そして、それをクリックして消える。ほとんどJSの警告ボックスのように動作します。唯一のことは、アラート/ポップアップでページ上のすべてのアクティビティをフリーズしないことです。

HTML

<input pattern=".{10,}" type='text' id='phone' name="Phone" maxlength="10" placeholder="Phone" <?php if(isset($_POST['Phone'])){echo "Value ='$_POST[Phone]'";}?> required> 

<div id="pop"> 
    <div class="errormsg">Mobile Number has to start with 7,8, or 9 !</div> 
<br> 
    <div id="popclose">OK</div> 
</div> 

CSS

#pop{ 
    display:none 
} 

#pop{ 
    position:absolute; 
    left:0; 
    right:0; 
    top:40%; 
    width:350px; 
    margin:0 auto; 
    text-align:center; 
    padding:10px; 
    background-color:maroon; 
    border:5px solid yellow; 
    color:white 
} 

#popclose{ 
    width:20px; 
    text-align:center; 
    margin:0 auto; 
    padding:5px; 
    cursor:pointer; 
    font-weight:bold; 
    color:yellow 
} 

.errormsg{ 
    font-weight:bold 
} 

JS

function checkValue(phval) { 

$('#phone').blur(function(){checkValue($(this).val());return true;}); 
    var res = phval.substr(0, 1); 
    if (res!=="7" && res!=="8" && res!=="9") { 
//  alert("Number has to be Mobile number starting with 7, 8 or 9/Your Value is "+phval); 
      $('#pop').fadeIn('fast'); 

    } 

} 

$('document').ready(function(){ 
    $('#popclose').click(function(){ 
     $('#pop').fadeOut('fast'); 
    }); 
}); 

今それは好奇心の問題だTJクラウダー