脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

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

  发布时间：2016-03-25 15:06:11   作者：佚名   我要评论
下面小编就为大家带来一篇移动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

相关文章

  • 移动端HTML5实现文件上传功能【附代码】

    下面小编就为大家带来一篇移动端HTML5实现文件上传功能【附代码】。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-03-25

  • 深入研究HTML5实现图片压缩上传功能

    下面小编就为大家带来一篇深入研究HTML5实现图片压缩上传功能。小编觉得挺不错的，现在分享给大家。也给大家一个参考，一起跟随小编过来看看吧
    2016-03-25

  • HTML5触摸事件演化tap事件介绍

    下面小编就为大家带来一篇HTML5触摸事件演化tap事件介绍。小编觉得挺不错的，现在分享给大家，也给大家一个参考。一起跟随小编过来看看吧
    2016-03-25

  • jQuery+html5实现企业年会数字抽奖特效源码

    jQuery+html5实现企业年会数字抽奖特效源码是一款基于jQuery+HTML5实现的企业年会电子数字抽奖代码。需要的朋友前来下载源码
    2016-03-25

  • html5生成柱状图(条形图)效果的实例代码

    下面小编就为大家分享一篇html5生成柱状图(条形图)效果的实例代码。小编觉得挺不错的，现在分享给大家，也给大家一个参考。一起跟随小编过来看看吧
    2016-03-25

  • 用html5绘制折线图的实例代码

    下面小编就为大家带来一篇用html5绘制折线图的实例代码。小编觉得挺不错的，现在分享给大家。也给大家一个参考。一起跟随小编过来看看吧
    2016-03-25

  • 详解HTML5 Canvas绘制时指定颜色与透明度的方法

    这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下
    2016-03-25

  • 实例讲解使用HTML5 Canvas绘制阴影效果的方法

    这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影+边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下
    2016-03-25

最新评论

关注微信公众号

扫一扫