本次小记，问题分析：
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(*▽*)咻咻咻-------------------- */
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
