القواعد القديمة ~ عندما تذهب إلى العرض التوضيحي ، سوف تستمتع أولاً: جهاز إدخال كلمة مرور الحرف المكون من ستة أرقام
ثم أضف رمز المصدر: مدخل كلمة مرور الحرف المكون من ستة أرقام
من العرض التجريبي ، أستطيع أن أرى أنه أولاً ، يمكن إدخال ستة أحرف فقط ، ولا يُسمح إلا بإدخال الأرقام. بعد اكتمال إدخال ستة أرقام ، سيتم تنفيذ رد الاتصال تلقائيًا (يتم عرض نتيجة الإدخال في العرض التوضيحي)
1. لنتحدث عن المبدأ أولاً
بادئ ذي بدء ، نحتاج إلى شيئين: أحدهما هو مربع إدخال حقيقي ، أي أنه بالفعل في التركيز ويحصل على إدخال الإدخال من المستخدم ؛ والآخر هو مجموعة من صناديق الإدخال الزائفة ، أي أنها لا تحصل على التركيز حقًا ، ولكنها تعرض فقط القيمة التي تم إدخالها حاليًا (بالطبع ، كلمة المرور هي مجرد نقطة أسود صغيرة ~).
ثانياً ، نحن بحاجة إلى أن نكون بسيطين ولا نخافون منه ، مما يسمح بمجموعة من العناصر المزيفة (6) للتداخل أسفل مربع الإدخال الحقيقي. على النحو التالي:
في الواقع لا يوجد هامش ~ ، فقط لرؤيته بشكل أكثر وضوحا.
بالإضافة إلى ذلك ، نحتاج إلى تعيين مربع الإدخال الحقيقي على مستوى أعلى إلى 0 ، بحيث يتم تقديم هذه المجموعة من مربعات الإدخال المزيفة هذه.
ومع ذلك ، عندما يدخل المستخدم مرة أخرى ، لا يزال يعمل على مربع الإدخال الحقيقي. بعد ذلك ، سنملأ إدخال المستخدم في مربع الإدخال المزور بدوره ~
بسيطة جدا ~
2. رمز الرمز
أولاً ، تتم تهيئة DOM الفردية ، ويتم ربط حدث الإدخال.
وظيفة init (متعة) {var that = this ؛ this.callback = fun ؛ that.realInput = container.children [0] = function () {that.setValue () ؛} that.realInput.OnPropertyChange = function () {that.setValue () ؛}}ثم ، عند إدخال إدخال المستخدم ، يتم إدخال إدخال المستخدم في مربع الإدخال المزور على التوالي
وظيفة setValue () {this.realinput.value = this.realinput.value.replace (// d/g ، "") ؛ console.log (this.realinput.value.replace (// d/g ، "") var real_str = this.realinput.value ؛ for i = 0 ؛ i ++) {this.bogusinputarr [i] .value = real_str [i]؟ real_str [i]: "" ؛} if (real_str.length> = this.maxLength) {this.realut.value = real_str.substring (0،6) ؛ this.callback () ؛}}أخيرًا ، نحتاج إلى الحصول على كلمة المرور ~ ، دعنا نحصل على طريقة للحصول على القيمة النهائية ~
الدالة getBoxInputValue () {var realvalue = "" ؛ for (var i في this.bogusinputarr) {if (! this.bogusinputarr [i] .value) {break ؛} realvalue += this.bogusinputarr [i] .value ؛ما سبق هو تنفيذ JS لوظيفة إدخال كلمة مرور الحرف المكونة من ستة أرقام التي أدخلها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!