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 相关文章推荐
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 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中,文件上传
2006/12/06 PHP
js代码实现微博导航栏
2015/07/30 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
python字符串判断密码强弱
2020/03/18 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
写出一个方法实现冒泡排序
2016/07/08 面试题
函授毕业生自我鉴定范文
2014/03/25 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书