Aturan lama ~ Saat Anda pergi ke demo, Anda akan bersenang-senang terlebih dahulu: perangkat input kata sandi karakter enam digit
Kemudian tambahkan kode sumber: masukkan kata sandi karakter enam digit
Dari demo, saya dapat melihat bahwa pertama, hanya enam karakter yang dapat dimasukkan, dan hanya angka yang diizinkan untuk dimasukkan. Setelah input enam digit selesai, panggilan balik akan dieksekusi secara otomatis (hasil input ditampilkan dalam demo)
1. Mari kita bicara tentang prinsipnya terlebih dahulu
Pertama -tama, kita membutuhkan dua hal: satu adalah kotak input nyata, yaitu, itu benar -benar fokus dan mendapatkan input input input dari pengguna; Yang lainnya adalah satu set kotak input semu, yaitu, itu tidak benar -benar mendapatkan fokus, tetapi hanya menampilkan nilai yang saat ini dimasukkan (tentu saja, kata sandi hanyalah titik hitam kecil ~).
Kedua, kita harus sederhana dan tidak takut, memungkinkan satu set (6) elemen palsu untuk tumpang tindih tepat di bawah kotak input asli. sebagai berikut:
Sebenarnya tidak ada margin ~, hanya untuk melihatnya lebih jelas.
Selain itu, kita perlu mengatur kotak input nyata tingkat atas Opcity ke 0, sehingga yang disajikan kepada pengguna adalah set kotak input palsu ini.
Namun, ketika pengguna masuk lagi, ia masih beroperasi di kotak input nyata. Setelah itu, kami akan mengisi input pengguna ke dalam kotak input tempa secara bergantian ~
Sangat sederhana ~
2. Kode kode
Pertama, DOM individu diinisialisasi, dan acara input terikat.
function init (fun) {var that = this; this.callback = fun; that.realInput = container.children [0]; that.bogusinput = container.children [1]; that.bogusinputArr = that.bogusinput.children; that.maxlength = that.bogusinputArrrutren (that.maxlength = that.bogusInputArpry. function () {that.setValue ();} that.realInput.onpropertychange = function () {that.setValue ();}}Kemudian, ketika input pengguna dimasukkan, input pengguna masing -masing dimasukkan ke dalam kotak input tempa
function setValue () {this.realInput.value = this.realInput.value.replace (// d/g, ""); console.log (this.realinput.value.replace (// d/g, "")) var real_str = this.realinput.value; i ++) {this.bogusInputArr [i] .value = real_str [i]? real_str [i]: "";} if (real_str.length> = this.maxlength) {this.realInput.value = real_str.substring (0,6); this.callback ();}}Akhirnya, kita perlu mendapatkan kata sandi ~, mari kita dapatkan metode untuk mendapatkan nilai akhir ~
fungsi getBoxInputValue () {var realValue = ""; for (var i di this.bogusInputArr) {if (! this.bogusInputArr [i] .value) {break;} realValue += this.bogusInputArr [i] .value;} return realValue;}Di atas adalah implementasi JS dari fungsi input kata sandi karakter enam digit yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!