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

来源：互联网发布：Unieuro.it 编辑：程序博客网时间：2024/04/28 06:25

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

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

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

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

html

<!DOCTYPE><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>Document</title>    <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>

*{    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到视口之外

阅读全文

0 0