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;">

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)
    }
}

结束