需求背景：用户在通过短信验证码方式注册或者登陆时，存在二次卡场景（运营商回收原机主不用的手机号，存放三个月后，再次开放给新机主），导致新机主可以登录原机主账号，如果原机主不换绑手机。二次卡判断条件：手机号、yg账号注册时间、运营商二次卡生效时间。如果手机号yg注册时间在运营商二次卡时间之前，那么是yg二次卡。如果手机号易购注册时间在运营商二次卡时间之后，不算yg二次卡
开发h5页面-二次卡验证需求，问题总结
1.弹窗编写
2.div等在ios中click事件无法触发
ios点击事件失效，div span p等标签不带点击事件，所以click事件无法触发
如果是a标签的话需要加上href=”javascript:void(0);”才能生效，否则也是失效
解决办法：
（1）给div等不可点击元素加上cursor：point
（2）不用$(document).on(“click”, “元素”，function(){})，改用$(“元素”).on(“click”,function(){})
（3）jquery改用tap事件，不用click事件
参考/q/1010000003038174
ios中click点击事件不起作用 - 简书
3.身份证按6-4-4-4分隔
//身份证截取var idCard = $(this).val().replace(/\s+/g,"").substr(0, 18);var len = idCard.length;if (len > 6 && len < 11) {idCard = idCard.substr(0, 6) + " " + idCard.substr(6);} else if (len >=11 && len < 15) {idCard = idCard.substr(0, 6) + " " + idCard.substr(6,4) + " " + idCard.substr(10);} else if (len >=15){idCard = idCard.substr(0, 6) + " " + idCard.substr(6,4) + " " + idCard.substr(10,4) + " " + idCard.substr(14);}
代码参考博客实现手机号344格式输入：000 0000 0000_爱睡觉真是太好了的博客-CSDN博客
在安卓手机会有个bug：追加空格的时候光标没有定位到最后，导致输入错乱
解决方法：setSelectionRange
使用此API，传入当前val长度，将光标定位到最后
function moveEnd(b) {if (b.createTextRange) {var a = b.createTextRange();a.collapse(false);a.select()} else {setTimeout(function() {var c = b.value.length;b.setSelectionRange(c, c)}, 20)}}
4.实际开发中使用form表单需要注意屏蔽button事件
比如我这里有两个button，一个是不可点击的，一个是高亮可点击的，js中绑定了click事件；
但是点击第一个button，form表单也会提交，需要给里面a标签加上href="javascript:void(0)"；
如果没用a标签，直接写的button的话，button默认的属性是submit，更改此属性给button加一个attr，type="button"，
或者给form加上onSubmit="return false;"，不过这样会影响我的另一个高亮button，所以不采用这个方法
4.邮箱验证码
4个label+1个input，input为隐藏状态，点击label，docus到input，控制输入
css中需要光标动画，1秒闪一下，自定义个动画
@keyframes blink {100% {opacity: 0}}animation: blink 1s infinite;-webkit-animation: blink 1s infinite
html
<div class="yzm_inputBox"><div id="yzm" class="yzm"><label class="label" for="yzminput"></label><label class="label" for="yzminput"></label><label class="label" for="yzminput"></label><label class="label" for="yzminput"></label></div><button class="getYzm">获取验证码</button></div><input type="text" oninput="yzminput()" id="yzminput" name="yzm" style="position:absolute;width:12.8rem;top:-100%;margin-left:-100%;text-indent: -999em;background-color:transparent;color:transparent;outline:none;border:transparent;">
js
//点击label，输入验证码$(".label").on("click", function() {yzminput();});$("#yzminput").blur(function() {$("#yzm").find(".active").removeClass("active");});//验证码输入function yzminput() {var yzm = $("#yzminput").val();var yzmArray = new Array();var reg = /^[0-9]*$/;if (!reg.test(yzm)) {AlertBox({type: "mini",msg: "请输入数字验证码"})yzm = yzm.replace(/[^0-9]/ig, "");$("#yzminput").val(yzm);return}for (i = 0; i < yzm.length; i++) {yzmArray[i] = yzm.charAt(i);$("#yzm").find(".active").removeClass("active");$(".label").eq(i + 1).addClass("active")}$.each(document.getElementsByClassName("label"), function(e, d) {$(".label").eq(e).html(yzmArray[e])});if ($(".label").eq(0).html() == "") {$(".label").eq(0).addClass("active");$(".label").eq(1).removeClass("active")}if ($("#yzminput").val().length > 4) {$("#yzminput")[0].value = $("#yzminput").val().substr(0, 4)}}
css
.yzm_inputBox{width: 100%;height: 1.8rem;clear: both;overflow: hidden;.yzm{display: inline-block;clear: both;overflow: hidden;.label{float: left;width: 1.8rem;height: 1.8rem;border-bottom: 1px solid #ddd;line-height: 1.8rem;font-size: .96rem;margin-right: .72rem;text-align: center;position: relative;}.active:after {position: absolute;content: ' ';display: inline-block;height: .6rem;width: 2px;bottom: .54rem;left: 50%;background: #fb0;animation: blink 1s infinite;-webkit-animation: blink 1s infinite}}.getYzm{float: right;margin-top: 0.48rem;// display: inline-block;width: 3.72rem;height: 1.32rem;font-family: PingFangSC-Regular;font-size: .6rem;line-height: 1.32rem;text-align: center;color: #222;background: #FFF;letter-spacing: 0;border: 1px solid #ccc;border-radius: .24rem;font-weight: 700;}.disable{font-weight: normal;color: #CCCCCC;}}@keyframes blink {100% {opacity: 0}}
5.验证码倒计时
//获取验证码function getYzm(){$(document).on("click",".yzm_inputBox .getYzm",function(){var timer = 60;var selector = $(this);countDown(timer,selector);$("#yzminput").focus();});}//倒计时function countDown(timer,selector){if(timer == 0){selector.attr("disabled",false);selector.removeClass("disable");selector.text("获取验证码");timer = 60;}else{selector.attr("disabled",true);selector.addClass("disable");selector.text(timer+"S");timer--;setTimeout(function(){countDown(timer,selector);},1000)}}
结束
如果觉得《wap开发问题总结（ios中click事件无法触发 身份证分隔 倒计时 验证码分隔等）》对你有帮助，请点赞、收藏，并留下你的观点哦！
