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

最新推荐文章于 2024-08-12 09:04:35 发布

StoneIT_ZL

最新推荐文章于 2024-08-12 09:04:35 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS javascript 文章标签： ios h5 键盘隐藏移动

本文链接：https://blog.youkuaiyun.com/StoneIT_ZL/article/details/77945892

javascript 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML+CSS

6 篇文章

订阅专栏

针对iOS设备上输入密码或验证码时键盘频繁隐藏的问题，本文提出一种解决方案：使用一个input框配合多个span模拟多个输入框效果。详细介绍了四位短信验证码的实现方式，并指出由于光标无法隐藏的问题，建议通过设置input宽度和margin-left来规避。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题：多个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;
        }
    })
})