Menerapkan kotak input kata sandi pembayaran yang mirip dengan Alipay berdasarkan JS

Artikel ini mengimplementasikan antarmuka yang mirip dengan kata sandi pembayaran alipay, yang hanya dapat memasukkan angka dan hanya 6 digit yang dapat dimasukkan.

Pertama, izinkan saya menunjukkan kepada Anda renderingnya. Jika Anda merasa baik, silakan merujuk ke kode implementasi.

1. Lembar gaya

 .wrap {margin: 10px auto; lebar: 329px; tinggi: 640px; padding-top: 200px;}. InputBoxContainer {width: 240px; tinggi: 50px; margin: 0 auto; posisi: 12%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 100%; 1px solid; perbatasan-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; overflow: tersembunyi; posisi: absolute; z-index: 0;}. Inputboxcontainer. RealInput {width: 100%; tinggi: 100%; posisi: posisi: 0; next; width: 100%; tinggi: 100%; posisi: posisi: 0; next; width: 100%; tinggi: 100%; posisi: posisi: 0; 0; nxebsth: z-100%; tinggi: posisi: posisi: posisi: 0; 1; filter: alpha (opacity = 0);-moz-opacity: 0; opacity: 0;}. InputBoxContainer .BogusInput input {padding: 0; lebar: 16,3%; tinggi: 100%; float; latar belakang: #ffffff; Teks-Align: Center; center; font-SIZE: No. 20px; Border; solid;}.inputBoxContainer .bogusInput input:last-child{border: none;}.confirmButton{width: 240px;height: 45px;border-radius: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;background: #f4f4f4;border: #d5d5d5 1px solid;display: blok; ukuran font: 16px; margin: 30px auto; margin-bottom: 20px;}. showValue {width: 240px; tinggi: 22px; garis-line-height: 22px; font-size: 16px; Text-Align: Center; margin: 0 auto;}

2. Kode HTML

 <Div> <div id = "InputBoxContainer"> <input type = "text"/> <v> <input type = "password" maxlength = "6" Disabled/> <input type = "password" maxlength = "6" disabled/"input type =" password "maxlength =" 6 "disabled/" disabled/"input =" kata sandi "maxlength =" 6 "disabled/<inputed =" DRWECORY = "DRWECORY =" MAXLINDETE = "6" DISABLED/<INPUBED/"DRWECORY =" DRWECORY = "kata sandi" 6 " maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type="password" maxlength="6" disabled/><input type = "password" maxlength = "6" dinonaktifkan/> <input type = "password" maxlength = "6" dinonaktifkan/> <input type = "password" maxlength = "6" dinonaktifkan/</div> </div> <tombol id = "konfirmasibutton"> Div </tombol> <p id = "showvalue"> </p> p> p> p> p> div> div </tombol> <p iD = "showvalue"> </p> p> p> p> p> p> div>

3. Efek logika kontrol kode JS

 (function () {var container = document.geteLementById ("inputBoxContainer"); boxInput = {maxlength: "", realInput: "", bogusinput: "", bogusinputArr: ", callback:" ", init: function (fun) {var that = this.callback = fun = itu. container.children [0]; that.bogusInput = container.children [1]; that.bogusinputArr = that.bogusinput.children; That.realInput.onPropertyChange = function () {that.setValue ();}}, setValue: function () {this.realInput.value = this.realinput.value.realplace (// d/g, ""); console.log (this.RealInput.valeP (varePeP (varePe. this.realInput.value; for (var i = 0; i <this.maxlength; i ++) {this.bogusInputArr [i] .value = real_str [i]? real_str [i]: ";} if (real_str.length> = this.maxlength) {this.realinput.valeput = vale = length> = this.maxlength) {this.realinput.valeput real_str.substring (0,6); this.callback ();}}, getBoxInputValue: function () {var realValue = ""; for (var i di this.bogusinputArr) {if (! this.bogusinputArr [i] .value) {break; {ife -this. realValue;}}}) () boxInput.init (function () {getValue ();}); document.geteLementById ("confirmButton"). onclick = function () {getValue ();} function getValue () {document.geteLementByid ("showvalue".

Di atas adalah kotak input kata sandi pembayaran alipay berdasarkan JS 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!