挪动web仿真模拟顾客端完成多方框键入登陆密码

日期:2021-02-27 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

不知道道如何叙述题目,先看截图吧,大概的实际效果便是1个框键入1位登陆密码。

最初完成的思路是1个小方框便是1个type为password的input,每键入1位全自动跳到下1位,删掉1位就全自动跳到前1位,android上是OK的,很光滑也沒有bug,可是ios上会出現电脑键盘经常调起和关掉,十分危害客户体验。缘故估算是每一个input会持续的focus和blur,每次focus会调起电脑键盘,blur又会关掉电脑键盘,so....此计划方案毫无疑问不好了。

PM非要完成这类实际效果,木有方法~拗但是,1句客户体验不太好会让你没话说,谁要咱是前端开发呢~拗但是就找处理计划方案吧。

既然好几个是经常focus和blur致使的难题,又务必是登陆密码框,那为何不就用1个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:⑴000px;   
  34. top: ⑴00px;   
  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沒有,随后找1系列方式去掩藏光标,例如focus情况下设定text-indent,color设定transparent这些,但都于事无补,后来发现淘宝有个方法是focus情况下把登陆密码框丢到1边去,由于外层有overflow hidden,完善处理了难题~

以上这篇挪动web仿真模拟顾客端完成多方框键入登陆密码实际效果【附编码】便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

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

上一篇:H5仿手机微信页面实例教程(1) 返回下一篇:没有了