Javascript onblur 事件警报框不会消失

Question

我正在使用模糊事件来触发 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>

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 使用“Modal”(如 div)的建议。

我在模糊事件上创建了淡入错误 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');   
    });
});

谢谢 T J 克劳德