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

本次小记，问题分析：
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 functionszdalert = 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(*▽*)咻咻咻-------------------- */

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

HTML、CSS、JavaScript、jQuery
1 HTML.CSS HTML: 用于开发网页的一门技术 CSS: 用于修饰.渲染网页的一门技术 HTML+CSS可以开发一个非常美观.非常漂亮的网页开发网页盖房子 HTML标签搭建网页的结构砖 ...
JavaScript基础 -- js常用内置方法和对象
JS中常用的内置函数如下: 1.eval(str):计算表达式的结果. 2.parseInt(str,n):将符串转换成整数数字形式(可指定几进制). 3.parseFloat(str):将字符串转换 ...
JavaScript基础语法_JavaScript内置对象
JavaScript内置对象 JavaScript中的对象分为3种:自定义对象,内置对象,浏览器对象前两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于js独有内置对象就是指J ...
JavaScript三种弹出框（alert，confirm和prompt）
JavaScript三种弹出框(alert,confirm和prompt)用法举例 http://blog.csdn.net/lucky51222/article/details/45604681 我 ...
javaScript提取双花括号内字符串
javaScript提取双花括号内字符串已有的字符串如下: var sourceStr = "{{in.type.thrustType@/template/总体设计/算法2/}}+{{in ...
JS(内置对象,全局函数,事件,事件对象)
目录内置对象全局函数事件事件对象内置对象 <!DOCTYPE html> <html><head><meta charset="utf-8 ...
深入理解JavaScript系列（2）：揭秘命名函数表达式(转)
前言网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数 ...
JavaScript从入门到放弃 -（五）函数进阶（高级用法）
目录 1. 函数的定义和调用 1.1 函数定义的3种方式 1.2 函数调用方式(常见的6种) 1.2.1 普通函数的调用 1.2.2 对象中的函数调用 1.2.3 构造函数的调用 1.2.4 DOM元 ...
Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一.Js简介和入门继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button οnclick="javas ...
Javascript面向对象编程指南笔记 - 第三章 - 函数
第三章函数第三章函数 3-1 什么是函数 3-1-1 调用函数 3-1-2 参数 3-2 预定义函数 3-2-1 parseInt 3-2-2 parseFloat 3-2-3 isNaN 3- ...

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

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

最新文章

热门文章