Kemahiran input box_javascript kata laluan Alipay tiruan JavaScript

Pada masa kini, banyak senario pembayaran dilakukan pada telefon mudah alih Memandangkan pembangunan halaman H5 menjadi lebih mudah, banyak senario juga telah dipindahkan dari pelanggan ke penyemak imbas, dan senario pembayaran diletakkan di dalamnya pelayar. Jadi anda pasti akan biasa dengan kotak input seperti itu:

Jadi hari ini saya akan menggunakan kod JavaScript untuk mencapai kesan ini. Jadi pertama sekali, izinkan saya memperkenalkan keseluruhannya idea. , mula-mula kita akan tentukan bilangan digit untuk memasukkan kata laluan Keperluan saya ialah 5 digit, kemudian gunakan tag p untuk membungkus 5 tag input.

Dan tetapkan paparan: atribut blok sebaris untuk 5 input ini, dan gunakan 5d264b06036cf61e3c5c7f9f40741932 untuk menghapuskan nilai margin langsung elemen, maka HTML akan kelihatan seperti berikut :

<p class="input"> 
<input type="tel" placeholder="随" maxlength=""><!- 
-><input type="tel" placeholder="机" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="数" maxlength=""> 
</p>

Dalam kod, kita perlu menetapkan bilangan maksimum digit input, jika tidak, ia tidak akan kelihatan seperti itu~ Sudah tentu, untuk membangkitkan papan kekunci angka apabila memasukkan pada terminal mudah alih, kita juga perlu menetapkan type="tel". Kemudian langkah seterusnya ialah kod gaya CSS Di sini saya hanya akan menyiarkan beberapa kod Replika khusus ada di sini~

input { 
display: inline-block; 
&:last-child { 
border-right: px solid #; 
} 
input { 
border-top: px solid #; 
border-bottom: px solid #; 
border-left: px solid #; 
width: px; 
height: px; 
outline:none; 
font-family: inherit; 
font-size: px; 
font-weight: inherit; 
text-align: center; 
line-height: px; 
color: #ccc; 
background: rgba(,,,); 
} 
}

Kemudian langkah seterusnya ialah bahagian JavaScript yang paling kritikal >

Mula-mula kami memantau p paling luar Apabila kami mendapati bahawa pengguna memilih p, kami menetapkan fokus input kepada aktif, dan aktif ini secara lalai Apabila kami memasukkan nombor yang betul, ia akan masuk tempat pertama, iaitu 0. Apabila kita memasukkan nombor yang betul, aktif akan ditambah, supaya fokus input akan bergerak ke belakang, sekali gus melengkapkan fungsi memasukkan nombor dan mengalihkannya ke belakang satu kedudukan , dan di pada masa yang sama kita memantau kekunci ruang belakang pada papan kekunci Apabila pengguna mengklik kekunci ruang belakang, yang aktif dikurangkan dengan satu, supaya fokus kotak input bergerak ke hadapan peristiwa mendengar terikat kepadanya supaya ia tidak akan menyebabkan pelbagai masalah pencetus.

/** 
* 模拟支付宝的密码输入形式 
*/ 
(function (window, document) { 
var active = , 
inputBtn = document.querySelectorAll('input'); 
for (var i = ; i < inputBtn.length; i++) { 
inputBtn[i].addEventListener(&#39;click&#39;, function () { 
inputBtn[active].focus(); 
}, false); 
inputBtn[i].addEventListener(&#39;focus&#39;, function () { 
this.addEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
inputBtn[i].addEventListener(&#39;blur&#39;, function () { 
this.removeEventListener(&#39;keyup&#39;, listenKeyUp, false); 
}, false); 
} 
/** 
* 监听键盘的敲击事件 
*/ 
function listenKeyUp() { 
var beginBtn = document.querySelector(&#39;#beginBtn&#39;); 
if (!isNaN(this.value) && this.value.length != ) { 
if (active < ) { 
active += ; 
} 
inputBtn[active].focus(); 
} else if (this.value.length == ) { 
if (active > ) { 
active -= ; 
} 
inputBtn[active].focus(); 
} 
if (active >= ) { 
var _value = inputBtn[active].value; 
if (beginBtn.className == &#39;begin-no&#39; && !isNaN(_value) && _value.length != ) { 
beginBtn.className = &#39;begin&#39;; 
beginBtn.addEventListener(&#39;click&#39;, function () { 
calculate.begin(); 
}, false); 
} 
} else { 
if (beginBtn.className == &#39;begin&#39;) { 
beginBtn.className = &#39;begin-no&#39;; 
} 
} 
} 
})(window, document);

Sebenarnya, jika anda menyusunnya seperti ini, anda akan mendapati bahawa keseluruhan kesannya masih sangat mudah Anda hanya perlu mengawal pergerakan fokus, dan saya fikir fokus keseluruhan komponen masih meniru gaya CSS ~ Lagipun Tiada apa-apa yang sukar tentang logik JavaScript ~ Akhir sekali, saya mengucapkan selamat Tahun Baru kepada semua orang ~ (*^__^*) ~~

Kod di atas secara ringkas memperkenalkan keseluruhan perihalan kotak input kata laluan Alipay tiruan JavaScript Harap anda semua menyukainya.