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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
javascript之AJAX框架使用说明
Apr 24 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
微信小程序实现上传图片功能
May 28 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vue+axios 拦截器实现统一token的案例
Sep 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
php设计模式之命令模式的应用详解
2013/05/21 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
机械设计职业生涯规划书
2013/12/27 职场文书
银行学习十八大感想
2014/01/11 职场文书
基层工作经历证明
2014/01/13 职场文书
改革共识倡议书
2014/08/29 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
如何用python反转图片,视频
2021/04/24 Python
Linux磁盘管理方法介绍
2022/06/01 Servers