กฎเก่า ~ เมื่อคุณไปสาธิตคุณจะสนุกก่อน: อุปกรณ์ป้อนรหัสผ่านตัวอักษรหกหลัก
จากนั้นเพิ่มซอร์สโค้ด: อินพุตรหัสผ่านอักขระหกหลัก
จากการสาธิตฉันจะเห็นว่ามีตัวอักษรเพียงหกตัวเท่านั้นที่สามารถป้อนได้และได้รับอนุญาตให้ป้อนตัวเลขเท่านั้น หลังจากอินพุตของตัวเลขหกหลักเสร็จสิ้นการโทรกลับจะถูกเรียกใช้งานโดยอัตโนมัติ (ผลลัพธ์อินพุตจะปรากฏในการสาธิต)
1. มาพูดถึงหลักการก่อน
ก่อนอื่นเราต้องการสองสิ่ง: หนึ่งคือกล่องอินพุตจริงนั่นคือมันอยู่ในโฟกัสและได้รับอินพุตอินพุตอินพุตจากผู้ใช้ อีกชุดหนึ่งเป็นชุดของกล่องอินพุตหลอกนั่นคือมันไม่ได้รับโฟกัสจริง ๆ แต่จะแสดงค่าที่ป้อนในปัจจุบันเท่านั้น (แน่นอนว่ารหัสผ่านเป็นเพียงจุดสีดำขนาดเล็ก ~)
ประการที่สองเราต้องเรียบง่ายและไม่กลัวมันอนุญาตให้ชุด (6) องค์ประกอบปลอมทับซ้อนกันใต้กล่องอินพุตจริง ดังนี้:
จริงๆแล้วไม่มีอัตรากำไรขั้นต้น ~ เพียงเพื่อดูมันชัดเจนยิ่งขึ้น
นอกจากนี้เราจำเป็นต้องตั้งค่ากล่องอินพุตจริงระดับบนสุดเป็น 0 เพื่อให้หนึ่งที่นำเสนอให้กับผู้ใช้คือชุดอินพุตปลอมชุดนี้
อย่างไรก็ตามเมื่อผู้ใช้เข้าสู่อีกครั้งเขายังคงทำงานในกล่องอินพุตจริง หลังจากนั้นเราจะกรอกข้อมูลในอินพุตของผู้ใช้ลงในกล่องอินพุตปลอมในทางกลับกัน ~
ง่ายมาก ~
2. รหัสรหัส
ก่อนอื่น DOM แต่ละตัวจะเริ่มต้นและเหตุการณ์อินพุตจะถูกผูกไว้
ฟังก์ชั่น init (fun) {var that = this; this.callback = fun; that.realinput = container.children [0]; that.bogusInput = container.children [1]; that.bogusinputarr = that.bogusInput.childrens. = function () {that.setValue ();} that.realInput.onPropertyChange = function () {that.setValue ();}}จากนั้นเมื่อป้อนอินพุตของผู้ใช้อินพุตของผู้ใช้จะถูกป้อนลงในกล่องอินพุตปลอมตามลำดับ
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]: "";} ถ้า (real_str.length> = this.maxlength) {this.realinput.value = real_str.substring (0,6); this.callback ();}}สุดท้ายเราต้องได้รับรหัสผ่าน ~ ขอวิธีการรับค่าสุดท้าย ~
ฟังก์ชั่น getBoxInputValue () {var realValue = ""; สำหรับ (var i ใน this.bogusinputarr) {ถ้า (! this.bogusinputarr [i] .value) {break;} realValue += this.bogusinputarr [i] .value;ข้างต้นคือการใช้งาน JS ของฟังก์ชั่นอินพุตรหัสผ่านตัวอักษรหกหลักที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!