js meniru Alipay untuk mengisi kesan kata laluan pembayaran untuk mencapai kemahiran input_javascript kata laluan berbilang kotak

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 kata laluan jenis Setiap kali digit dimasukkan, ia secara automatik melompat ke digit seterusnya Apabila digit dipadamkan, ia secara automatik melompat ke digit sebelumnya OK pada Android Ia adalah sangat Ia 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 membawa papan kekunci, dan kabur akan menutup papan kekunci, jadi... penyelesaian ini pasti tidak akan berfungsi.

PM harus 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 membantunya , baru cari jalan penyelesaian.

Memandangkan banyak masalah berpunca daripada fokus yang kerap dan kabur, dan ia mestilah kotak kata laluan, apa kata gunakan kotak input untuk memasukkannya, dan gunakan kaedah lain untuk mensimulasikan kotak kecil, dan mari kita mulakan.

Berikut ialah gaya yang dilaksanakan:

.pwd-box{
width:310px;
padding-left: 1px;
position: relative;
border: 1px solid #9f9fa0;
border-radius: 3px;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 45px;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 18px;
opacity: 0;
z-index: 1;
letter-spacing: 35px;
}
.fake-box input{
width: 44px;
height: 48px;
border: none;
border-right: 1px solid #e5e5e5;
text-align: center;
font-size: 30px;
}
.fake-box input:nth-last-child(1){
border:none;
}

.pwd-box .pwd-input:focus{//密码框聚焦的时候需要改变其位置，否则IOS上会有闪动的光标~
left:-1000px;
top: -100px;
}

var $input = $(".fake-box input");
      $("#pwd-input").on("input", function() {
        var pwd = $(this).val().trim();
        for (var i = 0, len = pwd.length; i < len; i++) {
          $input.eq("" + i + "").val(pwd[i]);
        }
        $input.each(function() {
          var index = $(this).index();
          if (index >= len) {
            $(this).val("");
          }
        });
        if (len == 6) {
          self.sendPackage(pwd);//发送密码
        }
      });

Idea umum adalah untuk memantau secara dinamik input kotak kata laluan sebenar dan mengubah suai kandungan kotak kata laluan dalam kotak kecil.

Sebenarnya, tidak sukar untuk mencapai kesannya. Kuncinya adalah untuk menyelesaikan masalah keserasian Apabila kesannya selesai, IOS akan mempunyai kursor berkelip, tetapi Android tidak menyembunyikan kursor, seperti menetapkan teks- semasa memfokus, tetapan warna, telus, dan lain-lain, tetapi semuanya sia-sia Kemudian saya mendapati bahawa Taobao mempunyai cara untuk membuang kotak kata laluan ke tepi apabila memfokus, kerana lapisan luar mempunyai limpahan tersembunyi, yang menyelesaikan masalah dengan sempurna.

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.