wap开发问题总结（ios中click事件无法触发、身份证分隔、倒计时、验证码分隔等）

需求背景：用户在通过短信验证码方式注册或者登陆时，存在二次卡场景（运营商回收原机主不用的手机号，存放三个月后，再次开放给新机主），导致新机主可以登录原机主账号，如果原机主不换绑手机。二次卡判断条件：手机号、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事件

参考https://segmentfault.com/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;">

 //点击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事件无法触发、身份证分隔、倒计时、验证码分隔等）相关推荐

IOS中触摸事件学习
IOS中触摸事件学习 1. 事件的声明周期 2. 系统相应阶段 3. APP响应阶段 4. 触摸.事件.响应者 4.1 UITouch(触摸) 4.2 UIEvent(事件真身) 4.3 UIResp ...
阻止 mousemove 或 touchmove 与 click 事件同时触发
最近做了自己的开源项目 Msw-Tools,参考了 VConsole 工具中按钮的拖拽功能,计划给 MSW 按钮也增加类似的拖拽效果,并兼容PC端和手机端,但是遇到一个问题:一个按钮绑定了多个事件,怎 ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
IOS中的事件响应链,事件冒泡机制基本了解
本文主要讲解IOS中事件响应链,即事件冒泡机制.做过web开发的同学应该知道js事件冒泡是从主响应元素一层一层的向父级冒泡事件,在ios亦是如此,但是不同是ios中,如果冒泡链中有一方对事件进行响应处 ...
移动端ios中click点击失效
原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...
iOS 中的事件传递和响应机制 - 实践篇
注:根据史上最详细的iOS之事件的传递和响应机制-实践篇重新整理(适当删减及补充). 示意图说明:白色 view 是蓝色 view 的父视图:蓝色 view 是橙色 view 的父视图. 需求一:点击 ...
jQuery中click事件多次触发解决方案
jQuery 中元素的click事件中绑定其他元素的click事件. 因为jQuery中的click事件会累计绑定,导致事件注册越来越多. 解决方案: 1.能够避开,避免把click事件绑定到其他元素 ...
iOS中触摸事件传递和响应原理
系统响应阶段 1.手指触碰屏幕,屏幕感受到触摸后,将事件交由IOKit来处理. 2.IOKIT将触摸事件封装成IOHIDEvent对象,并通过mach port传递给SpringBoard进程. ma ...
ios开发 ajax hook,IOS中的网络拦截总结
因为业务场景需要,要求对App中网络请求进行拦截.这里包括原生网络请求和WebView里的网络请求.之前我们了解过原生网络请求的拦截是可以实现的,但是WebView中网络请求似乎还不太可能,所以抱着尝 ...

wap开发问题总结（ios中click事件无法触发、身份证分隔、倒计时、验证码分隔等）

wap开发问题总结（ios中click事件无法触发、身份证分隔、倒计时、验证码分隔等）相关推荐

最新文章

热门文章