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

https://www.jianshu.com/p/ee743a2402c3

 

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

代碼參考博客https://blog.csdn.net/DemoD/article/details/78786168

在安卓手機會有個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)
    }
}

--結束