移动web模拟客户端实现多方框输入密码效果【附代码】

不知道怎么描述标题，先看截图吧，大致的效果就是一个框输入一位密码。

最开始实现的思路是一个小方框就是一个type为password的input，每输入一位自动跳到下一位，删除一位就自动跳到前一位，android上是OK的，很平滑也没有bug，但是ios上会出现键盘频繁调起和关闭，非常影响用户体验。原因估计是每个input会不断的focus和blur，每次focus会调起键盘，blur又会关闭键盘，so....此方案肯定不行了。

PM非要实现这种效果，木有办法~拗不过，一句用户体验不好会让你没话说，谁要咱是前端呢~拗不过就找解决方案吧。

既然多个是频繁focus和blur导致的问题，又必须是密码框，那何不就用一个input框来输入呢，小方框就用别的方式模拟，开干。这是最后的效果：?html,css,js,output

下面是实现的样式：

JavaScript Code复制内容到剪贴板

.pwd-box{   

width:310px;   

padding-left: 1px;   

position: relative;   

border: 1px solid #9f9fa0;   

border-radius: 3px;   

}   

.pwd-box input[type="tel"]{   

width: 99%;   

height: 45px;   

color: transparent;   

position: absolute;   

top: 0;   

left: 0;   

border: none;   

font-size: 18px;   

opacity: 0;   

z-index: 1;   

letter-spacing: 35px;   

}   

.fake-box input{   

width: 44px;   

height: 48px;   

border: none;   

border-right: 1px solid #e5e5e5;   

text-align: center;   

font-size: 30px;   

}   

.fake-box input:nth-last-child(1){   

border:none;   

}   

.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~   

left:-1000px;   

top: -100px;   

}  

JavaScript Code复制内容到剪贴板

var $input = $(".fake-box input");   

            $("#pwd-input").on("input", function() {   

                var pwd = $(this).val().trim();   

                for (var i = 0, len = pwd.length; i < len; i++) {   

                    $input.eq("" + i + "").val(pwd[i]);   

                }   

                $input.each(function() {   

                    var index = $(this).index();   

                    if (index >= len) {   

                        $(this).val("");   

                    }   

                });   

                if (len == 6) {   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!