js仿支付宝填写支付密码效果实现多方框输入密码


Posted in Javascript onMarch 09, 2016

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

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程序设计有所帮助。

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
js实现分割上传大文件
Mar 09 #Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 #Javascript
You might like
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
微信小程序云开发之数据库操作
2019/05/18 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python退火算法在高次方程的应用
2018/07/26 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
C#面试问题
2016/07/29 面试题
日本语毕业生自荐信
2014/02/01 职场文书
工程质量月活动方案
2014/02/19 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
旅游市场营销方案
2014/03/09 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
入队仪式主持词
2015/07/04 职场文书
Python合并多张图片成PDF
2021/06/09 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android