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

                    $input.eq("" + i + "").val(pwd[i]);   
                }   
                $input.each(function() {   
                    var index = $(this).index();   
                    if (index >= len) {   
                        $(this).val("");   
                    }   
                });   
                if (len == 6) {   
                    self.sendPackage(pwd);//发送密码   
                }   
            });  

大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。

其实效果实现不难，关键是思路还有解决该死的兼容，完成该效果的时候IOS会有闪动的光标，android没有，然后找一系列方法去隐藏光标，比如focus时候设置text-indent,color设置transparent等等，但都无济于事，后来发现淘宝有个办法是focus时候把密码框丢到一边去，因为外层有overflow hidden，完美解决了问题~

以上这篇移动web模拟客户端实现多方框输入密码效果【附代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

原文地址：http://www.cnblogs.com/hutuzhu/p/5000024.html