移动web模拟客户端实现多方框输入密码效果【附代码】


Posted in HTML / CSS onMarch 25, 2016

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

移动web模拟客户端实现多方框输入密码效果【附代码】

最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验。原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了。

PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说,谁要咱是前端呢~拗不过就找解决方案吧。

既然多个是频繁focus和blur导致的问题,又必须是密码框,那何不就用一个input框来输入呢,小方框就用别的方式模拟,开干。这是最后的效果:http://jsbin.com/neqesiqogu/edit?html,css,js,output

下面是实现的样式:

JavaScript Code复制内容到剪贴板
  1. .pwd-box{   
  2. width:310px;   
  3. padding-left: 1px;   
  4. position: relative;   
  5. border: 1px solid #9f9fa0;   
  6. border-radius: 3px;   
  7. }   
  8. .pwd-box input[type="tel"]{   
  9. width: 99%;   
  10. height: 45px;   
  11. color: transparent;   
  12. position: absolute;   
  13. top: 0;   
  14. left: 0;   
  15. border: none;   
  16. font-size: 18px;   
  17. opacity: 0;   
  18. z-index: 1;   
  19. letter-spacing: 35px;   
  20. }   
  21. .fake-box input{   
  22. width: 44px;   
  23. height: 48px;   
  24. border: none;   
  25. border-right: 1px solid #e5e5e5;   
  26. text-align: center;   
  27. font-size: 30px;   
  28. }   
  29. .fake-box input:nth-last-child(1){   
  30. border:none;   
  31. }   
  32. .pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置,否则IOS上会有闪动的光标~   
  33. left:-1000px;   
  34. top: -100px;   
  35. }  
JavaScript Code复制内容到剪贴板
  1. var $input = $(".fake-box input");   
  2.             $("#pwd-input").on("input"function() {   
  3.                 var pwd = $(this).val().trim();   
  4.                 for (var i = 0, len = pwd.length; i < len; i++) {   
  5.                     $input.eq("" + i + "").val(pwd[i]);   
  6.                 }   
  7.                 $input.each(function() {   
  8.                     var index = $(this).index();   
  9.                     if (index >= len) {   
  10.                         $(this).val("");   
  11.                     }   
  12.                 });   
  13.                 if (len == 6) {   
  14.                     self.sendPackage(pwd);//发送密码   
  15.                 }   
  16.             });  

大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。

其实效果实现不难,关键是思路还有解决该死的兼容,完成该效果的时候IOS会有闪动的光标,android没有,然后找一系列方法去隐藏光标,比如focus时候设置text-indent,color设置transparent等等,但都无济于事,后来发现淘宝有个办法是focus时候把密码框丢到一边去,因为外层有overflow hidden,完美解决了问题~

以上这篇移动web模拟客户端实现多方框输入密码效果【附代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/hutuzhu/p/5000024.html

HTML / CSS 相关文章推荐
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 #HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 #HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 #HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 #HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 #HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 #HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 #HTML / CSS
You might like
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
jsTree使用记录实例
2016/12/01 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏