移动端密码及验证码输入框

解决问题: 多个input框连续输入iOS键盘隐藏问题

在ios由于focus事件默认被禁止,对于密码或验证码输入框,如果使用多个input框,每输入以为都会使键盘隐藏,输入下一位需要重新点击 input 框调出键盘,造成很不好的体验

以下的方式仅提供的是四位短信验证码的解决方案,密码输入解决方案类似,可在其基础上改造;解决方式是使用一个input框,在其上放置四个span,使输入的值显示在span中,使人感觉有四个输入框,不好的点就是没有光标,有兴趣的同学可以添加;

使用过程中有其他问题或有其他更好的解决方案,欢迎指教!!!

  • html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <link rel="stylesheet" href="style.css">
    <script>
        (function(doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                recalc = function() {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 375) + "px"
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener("DOMContentLoaded", recalc, false);
            recalc()
        })(document, window);
    script>
head>
<body>
    <div id="wrap">
        <div id="verification">
            <input type="number" readonlyunselectable="on">
            <div class="display-frame clearfix">
                <span>span>
                <span>span>
                <span>span>
                <span>span>
                <i>i>
                <i>i>
                <i>i>
            div>
        div>
    div>
    <script src="zepto.js">script>
    <script src="main.js">script>

body>
html>
  • css
*{
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: ".";
    visibility: hidden;
    clear: both;
    overflow: hidden;
    display: block;
    height: 0;
}
#wrap{
    width: 100vm;
    padding: 100px 0;
    background: #eee;
}
#verification{
    margin: 0 auto;
    position: relative;
    width: 2.4rem;
    background: #fff;
    height: .37rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: .16rem;
    overflow: hidden;
}
#verification input{
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}
#verification .display-frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    pointer-events: none;
}
#verification .display-frame span{
    float: left;
    display: block;
    width: 25%;
    line-height: .37rem;
    text-align: center;
    pointer-events: none;
}
#verification .display-frame i{
    position: absolute;
    top: .13rem;
    display: block;
    border-left: 1px solid #ccc;
    height: .12rem;
    width: 0;
    z-index: 10;
}
#verification .display-frame i:nth-child(5){
    left: 25%;
}
#verification .display-frame i:nth-child(6){
    left: 50%;
}
#verification .display-frame i:last-child{
    right: 25%;
}
  • javascript
$(function(){
    var elInput = $('#verification input'),
        elSpan = $('#verification .display-frame span');

    elInput.on("keyup", function(ev){
        var ev = ev || event;
        var val = $(this).val().toString();

        var val_arr = val.split("");

        $(elSpan).html("");
        for(var i = 0; i < val_arr.length; i++){
            $(elSpan[i]).html(val_arr[i]+"|");
        }
    })

    elInput.on("keydown", function(ev){
        var ev = ev || event;
        console.log(ev.keyCode)
        var val = $(this).val().toString();
        if(ev.keyCode >= 48 && ev.keyCode <= 57 && val.length >= 4){
            return false;
        }else if((ev.keyCode < 48 || ev.keyCode > 57) && ev.keyCode !=8){
            return false;
        }
    })
})

存在的问题: iOS上光标无法隐藏掉,个人认为是默认的光标层级太高;
解决方法:可以给input的宽度设置的更宽,之后设置margin-left到视口之外

你可能感兴趣的:(HTML+CSS,javascript)