js仿支付宝填写支付密码效果实现多方框输入密码
2016-03-09 00:00
821 查看
不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码。
最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验。原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了。
PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说,谁要咱是前端呢~拗不过就找解决方案吧。
既然多个是频繁focus和blur导致的问题,又必须是密码框,那何不就用一个input框来输入呢,小方框就用别的方式模拟,开干。
下面是实现的样式:
大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。
其实效果实现不难,关键是思路还有解决该死的兼容,完成该效果的时候IOS会有闪动的光标,android没有,然后找一系列方法去隐藏光标,比如focus时候设置text-indent,color设置transparent等等,但都无济于事,后来发现淘宝有个办法是focus时候把密码框丢到一边去,因为外层有overflow hidden,完美解决了问题。
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
输入密码时检测大写是否锁定的js代码
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
用Javascript评估用户输入密码的强度(Knockout版)
用Javascript评估用户输入密码的强度实现代码
输入密码检测大写是否锁定js实现代码
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
javascript记住用户名和登录密码(两种方式)
js检测用户输入密码强度
最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验。原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了。
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; i++) { $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,完美解决了问题。
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)输入密码时检测大写是否锁定的js代码
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
用Javascript评估用户输入密码的强度(Knockout版)
用Javascript评估用户输入密码的强度实现代码
输入密码检测大写是否锁定js实现代码
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
javascript记住用户名和登录密码(两种方式)
js检测用户输入密码强度
相关文章推荐
- javascript时间排序算法实现活动秒杀倒计时效果
- javascript基本算法汇总
- JS中特别绕弯子的一个循环。
- Array.push()方法传递的是引用
- javascript闭包
- JavaScript + CSS 控制打印格式
- 45个超实用的JavaScript技巧及最佳实践(一)
- js变量以及其作用域详解
- list转json
- jstl 四舍五入运算后保量两位小数
- js设置select默认值和是否弹出框
- lsit转json
- JS获取单选按钮的值
- js使用cookie
- jsp页面固定table头
- JSP页面获取系统时间
- JSP页面获取集合的长度
- JS页面跳转
- json解析
- JS 判断是否弹出框