Pelanggan simulasi web mudah alih menyedari kesan memasukkan kata laluan dalam berbilang kotak [dengan kod]_html5 kemahiran tutorial

Saya tidak tahu bagaimana untuk menerangkan tajuk Mari lihat tangkapan skrin terlebih dahulu Kesan umum ialah memasukkan kata laluan dalam kotak.

Idea pelaksanaan awal ialah kotak kecil adalah input jenis kata laluan Setiap kali anda memasukkan digit, ia secara automatik melompat ke digit seterusnya OK pada Android. Ia sangat lancar dan tidak mempunyai pepijat, tetapi pada iOS papan kekunci akan dibuka dan ditutup dengan kerap, yang sangat mempengaruhi pengalaman pengguna. Sebabnya mungkin setiap input akan terus fokus dan kabur Setiap kali fokus akan memaparkan papan kekunci, dan kabur akan menutup papan kekunci, jadi... penyelesaian ini pasti tidak akan berfungsi.

Jika PM berkeras untuk mencapai kesan ini, tidak ada cara~ Tetapi jika anda tidak dapat menahannya, pengalaman pengguna yang buruk akan membuat anda terdiam Siapa mahu kami menjadi front-end~ Jika anda tidak dapat membantu itu, hanya mencari penyelesaian.

Memandangkan banyak masalah disebabkan oleh fokus yang kerap dan kabur, dan ia mestilah kotak kata laluan, maka mengapa tidak gunakan kotak input untuk memasukkannya, dan gunakan kaedah lain untuk mensimulasikan kotak kecil, dan mari kita mulakan. Ini ialah kesan terakhir: http://jsbin.com/neqesiqogu/edit?html,css,js,output

Berikut ialah gaya yang dilaksanakan:

Kod JavaScriptSalin kandungan ke papan keratan

1. .pwd-box{
2. lebar:310px;
3. pelapis-kiri: 1px;
4. kedudukan: relatif;
5. sempadan: 1px pepejal #9f9fa0;
jejari sempadan: 3px;
}
.input kotak-pwd[type=
8. "tel"]{
lebar: 99%;
9. tinggi: 45px;
10. warna: lutsinar;
11. kedudukan: mutlak;
atas: 0;
kiri: 0;
sempadan: tiada;
14. saiz fon: 18px;
15. kelegapan: 0;
z-indeks: 1;
16. jarak huruf: 35px;
}
.input kotak palsu{
lebar: 44px;
tinggi: 48px;
sempadan: tiada;
21. sempadan-kanan: 1px pepejal #e5e5e5
22. sejajarkan teks: tengah;
23. saiz fon: 30px;
24. }
25. .input kotak palsu:anak-terakhir(1){
26. sempadan:tiada;
27. }
28. .pwd-box .pwd-input:focus{
//Anda perlu menukar kedudukannya apabila kotak kata laluan difokuskan, jika tidak akan terdapat kursor berkelip pada IOS~
30. kiri:-1000px;
31. atas: -100px;
32. }
33. Kod JavaScript
Salin kandungan ke papan keratan
34. 1. var $input = $(".fake-box input");   
    2.             $("#pwd-input").on("input", Funktion() {   
    3.                 var pwd = $(this).val().trim();   
    4.                 {                        $input.eq(""   i   
    ""
    5. ).val(pwd[i]);                    }                    $input.each(
    function
    6. () {   
    7.                                             
    if
    8.  (index >= len) {                            $(this).val(
    ""
    9. );                        }   
    10.                 });                    if (len == 6) {   
    11.                     self.sendPackage(pwd);
    //发送密码
    12.   
    13.                 }                });  
    14. 大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容. 其实效果实现不难, 关键是思路还有解决该死的兼容, 完成该效果的时候IOS会有闪动的光标,Android没有,然后找一系列方法去隐藏光标,比如focus时候设置text- Einzug, Farbe, transparent, 但都无济于事, 后来发现淘宝有个办法是Fokus, 到一边去, 因为外层有Überlauf ausgeblendet，完美解决了问题~
    以上这篇移动web模拟客户端实现多方框输入密码效果【附代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家.
    15. 原文地址：http://www.cnblogs.com/hutuzhu/p/5000024.html