บทความนี้ใช้อินเทอร์เฟซที่คล้ายกับรหัสผ่านการชำระเงินของ Alipay ซึ่งสามารถป้อนตัวเลขและสามารถป้อนได้เพียง 6 หลักเท่านั้น
ก่อนอื่นให้ฉันแสดงการเรนเดอร์ หากคุณรู้สึกดีโปรดดูรหัสการใช้งาน
1. แผ่นสไตล์
.Wrap {margin: 10px auto; ความกว้าง: 329px; ความสูง: 640px; padding-top: 200px;}. inputboxContainer {ความกว้าง: 240px; ความสูง: 50px; ระยะขอบ: 0 auto; ตำแหน่ง: ญาติ;}. Solid; Border-Radius: 7px; -moz-Border-Radius: 7px; -webkit-border-Radius: 7px; overflow: ซ่อนตำแหน่ง: Absolute; z-index: 0;}. inputboxContainer .realinput {ความกว้าง: 100%; ความสูง: 100%; 1; ตัวกรอง: อัลฟ่า (ความทึบ = 0);-moz-opacity: 0; ความทึบ: 0;}. inputboxContainer. bogusInput อินพุต {padding: 0; ความกว้าง: 16.3%; ความสูง: 100%; float: ซ้าย; SOLID;}. inputBoxContainer .BOGUSINPUT INPUT: Last-Child {Border: None;}. ConfirmButton {Width: 240px; ความสูง: 45px; Border-Radius: 7px; -moz-Border-Radius: 7px; -webkit-Border-Radius: 7PX; block; font-size: 16px; margin: 30px auto; margin-bottom: 20px;}. showvalue {width: 240px; ความสูง: 22px; สายไฟ: 22px; Font-Size: 16px;2. รหัส HTML
<div> <div id = "inputboxContainer"> <อินพุต type = "text"/> <div> <อินพุตประเภท = "รหัสผ่าน" maxlength = "6" ปิดใช้งาน/> <อินพุตประเภท = "รหัสผ่าน" maxlength = "6" ปิดใช้งาน/> <อินพุต type = "รหัสผ่าน" maxLength = "6" ปิดใช้งาน/> <อินพุต type = "รหัสผ่าน" maxLength = "6" ปิดใช้งาน/> <อินพุตประเภท = "รหัสผ่าน" maxLength = "6" ปิดใช้งาน/> <อินพุตประเภท = "รหัสผ่าน" maxLength = "6" disabled/> <อินพุต type = "รหัสผ่าน" maxLength = "6" ปิดใช้งาน/> <อินพุต type = "รหัสผ่าน" maxLength = "6" ปิดใช้งาน/> <อินพุต type = "รหัสผ่าน" maxlength = "6" ปิดใช้งาน
3. JS รหัสการควบคุมตรรกะ
(function () {var container = document.getElementById ("inputboxContainer"); boxInput = {maxlength: "", realInput: "", bogusInput: "", bogusInputarr: "", callback: " container.children [0]; bogusInput = container.children [1]; That.bogusInputarr = That.bogusInput.children; That.realInput.onProperTyChange = function () {that.setValue ();}}, setValue: function () {this.realInput.value = this.realInput.value.replace (// d/g, ""); console.log this.realinput.value; สำหรับ (var i = 0; i <this.maxLength; i ++) {this.bogusinputarr [i] .value = real_str [i]? real_str [i]: "";} ถ้า (real_str.length> = this.maxlength) real_str.substring (0,6); this.callback ();}}, getBoxInputValue: function () {var realValue = ""; สำหรับ (var i ใน this.bogusinputarr) {ถ้า (this.bogusinputarr [i]. realValue;}}}) () boxInput.init (ฟังก์ชั่น () {getValue ();}); document.getElementById ("ยืนยัน"). onClick = ฟังก์ชั่น () {getValue ()ด้านบนเป็นกล่องป้อนรหัสผ่านการชำระเงิน Alipay ตาม JS ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!