js仿支付宝填写支付密码效果,js多方框输入密码,js输入密码,js仿支付宝支付
web前端-js教程
不知道怎么描述标题，先看截图吧，大致的效果就是一个框输入一位密码。畅璇源码编译,ubuntu 编程内在原理,tomcat7日志多大,java爬虫方向效果,基于PHP的新闻发布视频教程,泗阳seo推广lzw
lamp 源码包下载,ubuntu命令窗口大小,好玩的爬虫宠物,php mms,seo首页链接lzw
最开始实现的思路是一个小方框就是一个type为password的input，每输入一位自动跳到下一位，删除一位就自动跳到前一位，android上是OK的，很平滑也没有bug，但是ios上会出现键盘频繁调起和关闭，非常影响用户体验。原因估计是每个input会不断的focus和blur，每次focus会调起键盘，blur又会关闭键盘，so….此方案肯定不行了。2017幸运28网站源码,ubuntu 休眠 时间,tomcat是通用的么,vc爬虫开发,PHP软件下载音乐网站,个人主页怎么做seolzw
PM非要实现这种效果，木有办法~拗不过，一句用户体验不好会让你没话说，谁要咱是前端呢~拗不过就找解决方案吧。既然多个是频繁focus和blur导致的问题，又必须是密码框，那何不就用一个input框来输入呢，小方框就用别的方式模拟，开干。
下面是实现的样式：
.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;}var $input = $(".fake-box input"); $("#pwd-input").on("input", function() { var pwd = $(this).val().trim(); for (var i = 0, len = pwd.length; i = len) { $(this).val(""); } }); if (len == 6) { self.sendPackage(pwd);//发送密码 } });大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。其实效果实现不难，关键是思路还有解决该死的兼容，完成该效果的时候IOS会有闪动的光标，android没有，然后找一系列方法去隐藏光标，比如focus时候设置text-indent,color设置transparent等等，但都无济于事，后来发现淘宝有个办法是focus时候把密码框丢到一边去，因为外层有overflow hidden，完美解决了问题。