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 对象链式操作测试代码
Apr 25 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
window.location.hash知识汇总
Nov 09 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
vue cli webpack中使用sass的方法
Feb 24 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多文件上传实例
2015/07/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python读取word文档的方法
2015/05/09 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
大学生实习思想汇报
2014/01/12 职场文书
驾驶员岗位职责
2014/01/29 职场文书
护士毕业实习感言
2014/03/05 职场文书
抽奖活动主持词
2014/03/31 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python