Der mobile Websimulations-Client erkennt den Effekt der Eingabe von Passwörtern in mehrere Felder [mit Code]_html5-Tutorial-Fähigkeiten

Ich weiß nicht, wie ich den Titel beschreiben soll. Schauen wir uns zuerst den Screenshot an. Der allgemeine Effekt besteht darin, ein Passwort in ein Feld einzugeben.

Die erste Implementierungsidee ist, dass ein kleines Feld eine Eingabe vom Typ Passwort ist. Jedes Mal, wenn Sie eine Ziffer eingeben, springt es automatisch zur nächsten Ziffer Unter Android ist es in Ordnung. Es läuft flüssig und weist keine Fehler auf, aber unter iOS wird die Tastatur häufig geöffnet und geschlossen, was sich stark auf das Benutzererlebnis auswirkt. Der Grund dafür ist wahrscheinlich, dass jede Eingabe kontinuierlich fokussiert und unscharf wird. Bei jedem Fokus wird die Tastatur angezeigt und bei Unschärfe wird die Tastatur geschlossen, also... wird diese Lösung definitiv nicht funktionieren.

Wenn PM darauf besteht, diesen Effekt zu erzielen, gibt es keine Möglichkeit. Aber wenn Sie nichts dagegen tun können, wird Ihnen eine schlechte Benutzererfahrung die Sprache verschlagen. Wer möchte, dass wir das Frontend sind? Wenn Sie nicht helfen können es, finden Sie einfach eine Lösung.

Da viele Probleme durch häufiges Fokussieren und Unschärfe verursacht werden und es sich um ein Passwortfeld handeln muss, warum nicht ein Eingabefeld zur Eingabe verwenden und andere Methoden verwenden, um das kleine Feld zu simulieren, und los geht's. Dies ist der endgültige Effekt: http://jsbin.com/neqesiqogu/edit?html,css,js,output

Das Folgende ist der implementierte Stil:

JavaScript-CodeInhalt in die Zwischenablage kopieren

1. .pwd-box{
2. Breite:310px
3. padding-left: 1px
4. Position: relativ;
5. Rahmen: 1px durchgezogen #9f9fa0;
Grenzradius: 3px;
6. }
7. .pwd-box input[type=
"tel"
8. ]{ Breite: 99 %;
9. Höhe: 45px;
10. Farbe: transparent
11. Position: absolut;
12. oben: 0;
13. links: 0;
14. Grenze: keine
15. Schriftgröße: 18px
16. Deckkraft: 0;
17. z-index: 1;
18. Buchstabenabstand: 35px
19. }
20. .fake-box input{
21. Breite: 44px;
22. Höhe: 48px
23. Grenze: keine
24. border-right: 1px solid #e5e5e5;
text-align: center;
Schriftgröße: 30px
}
.fake-box input:nth-last-child(1){
Grenze:keine;
}
.pwd-box .pwd-input:focus{
31. //Sie müssen seine Position ändern, wenn das Passwortfeld fokussiert ist, sonst wird auf IOS ein blinkender Cursor angezeigt~
32. links:-1000px
oben: -100px
}
JavaScript-Code

Inhalt in die Zwischenablage kopieren

1. var $input = $(".fake-box input");   
2.             $("#pwd-input").on("input", fonction() {   
3.                 var pwd = $(this).val().trim();   
4.                 pour (var i = 0, len = pwd.length; i < len; i ) {   
5.                     $input.eq(""   i   "").val(pwd[i]);   
6.                 }   
7.                 $input.each(fonction() {   
8.                     var index = $(this).index();   
9.                     if (index >= len) {   
10.                         $(ce).val("");   
11.                     }   
12.                 });   
13.                 if (len == 6) {   
14.                     self.sendPackage(pwd);//发送密码   
15.                 }   
16.              });  

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

其实效果实现不难，关键是思路还有解决该死的兼容，完成该效果的时候IOS会有闪动的光标， Android没有,然后找一系列方法去隐藏光标，比如focus时候设置text- indentation,couleurtransparent, caché，完美解决了问题~

以上这篇移动web模拟客户端实现多方框输入密码效果】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

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