JavaScript在jQuery $("#").blur()内使用使用alert()函数导致无限失去焦点循环执行弹窗警告无法跳出解决方案

原创
2020/02/27 10:50
阅读数 1.8K

 

本次小记,问题分析:
1、时间差问题:
在当我点击了alert后,清空并聚焦input框,但是在我点击alert的那一刹那间,焦点不在input框上,又触发了失焦事件,导致又弹出了alert。
2、顺序问题:
抱着先让它弹出在执行清空并聚焦的心态,我把alert放在清空聚焦上面,但是不管alert放在清空聚焦上面还是清空聚焦下边,都是在alert弹出后你点确定的那一刻才执行清空聚焦这些代码。其实在alert弹出的一刻,就已经读取了清空聚焦代码,但是需要在alert弹出后点确定的那一刻才执行清空聚焦代码。

        综上分析,alert在js代码中是优先加载的,因为在alert点确定后就执行了清空聚焦代码,但这一刹那焦点还在未全关闭的alert弹窗上,所以又触发了失焦事件,导致无限循环……

为此在网上找了很多资料依然没有解决,最后再小伙伴们的帮助下借鉴了整个方法。

解决方案:

用虚拟弹窗,直接用zdalert()或zdconfirm()代替alert。

HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>alert_.blur-BUG</title>
		<link rel="stylesheet" type="text/css" href="./css/informationRegistration.css">
		<link rel="stylesheet" type="text/css" href="js/layer.js">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="./js/informationRegistration.js"></script>
		<script src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/jquery.form.js"></script>
		<script type="text/javascript" src="./js/virtualPop_up.js"></script>
		<script type="text/javascript" src="./js/dome.js"></script>
	

	</head>
	<body>
		<div class="zong">
			<div class="form">
				<form id="form2" action="##" onsubmit="return false" method="post" enctype="multipart/form-data">					
					<div class="changeDiv">
						<div class="ai">
							<label for="sgzh">身份证号</label>
							<i class="icomoon">*</i>
						</div>
						<input id="sgzh" type="text" name="idNumber" placeholder="请输入身份证号"
							   autocomplete="off"  maxlength="18" minlength="15"
							  ><!-- onKeyUp="value=value.replace(/[\W]/g)" -->
					</div>
					<div class="changeDiv">
						<div class="ai">
							<label for="sjh">手机号</label>
							<i class="icomoon">*</i>
						</div>
						<input type="text" id="sjh" placeholder="请输入纯数字的车主手机号"
							   autocomplete="off"	maxlength=11 minlength="11"  >
					</div>
				</form>
			</div>
		</div>
	</body>
</html>

.ulur()监听html input 焦点事件并调用虚拟弹窗Virtual pop-up 函数 js代码:

function regular() {
	//身份证正则
	$(document).ready(function () {
		var _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
		var _IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
		var ft=false;
		$("#sgzh").focus(function () {
		});
		//失去焦点身份证正则
		$("#sgzh").blur(function(){
			var sgzhValue=document.getElementById("sgzh").value;//身份证号码
			// alert("你输入的身份证号是:"+sgzhValue);
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if(reg.test(sgzhValue) === false)
			{
				console.log('进入.blur_sgzh')
				// alert("身份证输入不合法");
				// confirm('message');
				zdalert("温馨提示!","身份证号填写有误,请从新填写!");

				return false;
			}
		});
	});
	$(document).ready(function () {
		var ft=false;
		$("#sjh").focus(function () {
		});
		//失去焦点手机号正则
		$("#sjh").blur(function () {
			var sjhValue = document.getElementById("sjh").value;//手机号
			// alert("你输入的手机号:"+sjhValue);
			var regphone = /^1(3|4|5|6|7|8|9)\d{9}$/;
			if (regphone.test(sjhValue)=== false) {

				console.log('进入.blur_sgzh')
				// alert("手机号码有误或空,请重填");
				// confirm('me');
				zdalert("温馨提示!","手机号号填写有误,请从新填写!");
				zdconfirm()

				return false;
			}
		});
	});
}
regular();

虚拟弹窗Virtual pop-up js源码:内有两个不同功能的方法可调用

  (function($) {

                $.alerts = {
                    alert: function(title, message, callback) {
                        if(title == null) title = 'Alert';
                        $.alerts._show(title, message, null, 'alert', function(result) {
                            if(callback) callback(result);
                        });
                    },

                    confirm: function(title, message, callback) {
                        if(title == null) title = 'Confirm';
                        $.alerts._show(title, message, null, 'confirm', function(result) {
                            if(callback) callback(result);
                        });
                    },

                    _show: function(title, msg, value, type, callback) {

                        var _html = "";

                        _html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';
                        _html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
                        if(type == "alert") {
                            _html += '<input id="mb_btn_ok" type="button" value="确定" />';
                        }
                        if(type == "confirm") {
                            _html += '<input id="mb_btn_ok" type="button" value="确定" />';
                            _html += '<input id="mb_btn_no" type="button" value="取消" />';
                        }
                        _html += '</div></div>';

                        //必须先将_html添加到body,再设置Css样式
                        $("body").append(_html);
                        GenerateCss();

                        switch(type) {
                            case 'alert':

                                $("#mb_btn_ok").click(function() {
                                    $.alerts._hide();
                                    callback(true);
                                });
                                $("#mb_btn_ok").focus().keypress(function(e) {
                                    if(e.keyCode == 13 || e.keyCode == 27) $("#mb_btn_ok").trigger('click');
                                });
                                break;
                            case 'confirm':

                                $("#mb_btn_ok").click(function() {
                                    $.alerts._hide();
                                    if(callback) callback(true);
                                });
                                $("#mb_btn_no").click(function() {
                                    $.alerts._hide();
                                    if(callback) callback(false);
                                });
                                $("#mb_btn_no").focus();
                                $("#mb_btn_ok, #mb_btn_no").keypress(function(e) {
                                    if(e.keyCode == 13) $("#mb_btn_ok").trigger('click');
                                    if(e.keyCode == 27) $("#mb_btn_no").trigger('click');
                                });
                                break;

                        }
                    },
                    _hide: function() {
                        $("#mb_box,#mb_con").remove();
                    }
                }
                //确定
                // Shortuct functions
                zdalert = function(title, message, callback) {
                    $.alerts.alert(title, message, callback);
                }

                //取消
                zdconfirm = function(title, message, callback) {
                    $.alerts.confirm(title, message, callback);
                };
                var GenerateCss = function() {

                    $("#mb_box").css({
                        width: '100%',
                        height: '100%',
                        zIndex: '99999',
                        position: 'fixed',
                        filter: 'Alpha(opacity=60)',
                        backgroundColor: 'black',
                        top: '0',
                        left: '0',
                        opacity: '0.6'
                    });

                    $("#mb_con").css({
                        zIndex: '999999',
                        width: '4.0rem',
                        position: 'fixed',
                        backgroundColor: 'White',
                        borderRadius: '3px'
                    });

                    $("#mb_tit").css({
                        display: 'block',
                        fontSize: '0.186667rem',
                        color: '#444',
                        padding: '0.133333rem 0.2rem',
                        backgroundColor: '#DDD',
                        borderRadius: '3px 3px 0 0',
                        fontWeight: 'bold'
                    });

                    $("#mb_msg").css({
                        padding: '0.266667rem',
                        lineHeight: '0.266667rem',
                        borderBottom: '1px dashed #DDD',
                        fontSize: ' 0.173333rem'
                    });

                    $("#mb_ico").css({
                        display: 'block',
                        position: 'absolute',
                        right: '0.133333rem',
                        top: '0.12rem',
                        border: '1px solid Gray',
                        width: '0.24rem',
                        height: '0.24rem',
                        textAlign: 'center',
                        lineHeight: '0.213333rem',
                        cursor: 'pointer',
                        borderRadius: '12px',
                        fontFamily: '微软雅黑'
                    });

                    $("#mb_btnbox").css({
                        display:'flex',
                        margin: '0.133333rem 0 0.133333rem',
                        textAlign: 'center'
                    });
                    $("#mb_btn_ok,#mb_btn_no").css({
                        width: '1.133333rem',
                        height: '0.4rem',
                        color: 'white',
                        border: 'none'
                    });
                    $("#mb_btn_ok").css({
                        margin:'auto',
                        backgroundColor: '#168bbb'
                    });
                    $("#mb_btn_no").css({
                        backgroundColor: 'gray',
                        margin:'auto'
                        // marginLeft: '0.266667rem'
                    });

                    //右上角关闭按钮hover样式
                    $("#mb_ico").hover(function() {
                        $(this).css({
                            backgroundColor: 'Red',
                            color: 'White'
                        });
                    }, function() {
                        $(this).css({
                            backgroundColor: '#DDD',
                            color: 'black'
                        });
                    });

                    var _widht = document.documentElement.clientWidth; //屏幕宽
                    var _height = document.documentElement.clientHeight; //屏幕高

                    var boxWidth = $("#mb_con").width();
                    var boxHeight = $("#mb_con").height();

                    //让提示框居中
                    $("#mb_con").css({
                        top: (_height - boxHeight) / 2 + "px",
                        left: (_widht - boxWidth) / 2 + "px"
                    });
                }

            })(jQuery);

最终打印效果如下:

有最初设计是为了适配手机终端,所以宽度大小在PC呈现会有所不同,可以在Virtual pop-up  JS内修改CSS参数。

/*-------------------反爬虫声明o(*////▽////*)咻咻咻--------------------

作者:杨木发
版权声明:
       本文为博主倾情原创文章,整篇转载请附上源文链接!

如果觉得本文对你有所收获,你的请评论点赞 与

合理优质的转发也将是鼓励支持我继续创作的动力,

 更多精彩可百度搜索 杨木发 或:

个人网站:www.yangmufa.com    ,

天驱网:www.tianqv.net    ,

开源中国:https://my.oschina.net/yangmufa    ,

Gitee:https://gitee.com/yangmufa    ,

GitHub:https://github.com/yangmufa    。

坚持创作 善于总结 开源共享 高质进步。

-------------------反爬虫声明o(*////▽////*)咻咻咻--------------------*/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部