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建议使用像“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 Crowder

Javascript onblur事件警报框不会消失

1 个答案: