تنفذ هذه المقالة واجهة مشابهة لكلمة مرور ALIPAY ، والتي يمكنها إدخال الأرقام فقط ويمكن إدخال 6 أرقام فقط.
أولاً ، اسمحوا لي أن أريكم العروض. إذا كنت تشعر بالرضا ، يرجى الرجوع إلى رمز التنفيذ.
1. ورقة النمط
.wrap {margin: 10px auto ؛ width: 329px ؛ الارتفاع: 640px ؛ padding-top: 200px ؛}. inpoxcontainer {width: 240px ؛ الارتفاع: 50px ؛ margin: 0 auto ؛ الموضع: relative ؛}. الصلبة ؛ الحدود الحدودية: 7px ؛ -moz-border-radius: 7px ؛ -webkit-border-radius: 7px ؛ فائض: مخفي ؛ الموضع: المطلق ؛ z-index: 0 ؛}. 1 ؛ مرشح: ألفا (عتامة = 0) ؛-موز الحاجة: 0 ؛ العجز: 0 ؛} Solid ؛}. inpoxcontainer .BogusInput الإدخال: Last-Child {الحدود: لا شيء ؛}. تأكيد bordtton {width: 240px ؛ الارتفاع: 45px ؛ الحدود radius: 7px ؛ -moz-border-radius: 7px ؛ -webkit-bordius: 7px ؛ Block ؛ font-size: 16px ؛ margin: 30px auto ؛ margin-bottom: 20px ؛}. showvalue {width: 240px ؛ height: 22px ؛ line-height: 22px ؛ font-size: 16px ؛ text-align: center ؛ margin: 0 auto ؛}2. كود HTML
<div> <div id = "inpultboxcontainer"> <input type = "text"/> <viv> <input type = "password" maxLength = "6" upabled/> <inputive type = "password" maxLength = "6" 6 "up up expanbed =" password "maxlength =" 6 "<supabled/> <password" maxlistable = "6" maxLength = "6" upabled/> <type type = "password" maxLength = "6" distabled/> <input type = "password" maxLength = "6" upatabled/> <input type = "password" maxLength = "6" distabled/> <inputive type = "password" maxlength = 6 "distament/> MaxLength = "6" Austabled/> <inputive type = "password" maxLength = "6" 6 "upipated/> <input type =" password "maxLength =" 6 "distabled/</div> </viv> <button id =" includbutton "> عرض </button> <p id =" showvalue "> </p> </div>
3. تأثير منطق التحكم في رمز JS
(function () {var container = document.getElementById ("inputboxcontainer") ؛ boxInput = {maxLength: "" ، realInput: "" ، bogusinput: "" ، bogusinputarr: حاوية. that.realinput.onpropertyChange = function () {that.setValue () ؛}} ، setValue: function () {this.realInput.value = this.realinput.value.replace (// d/g ، " this.realinput.value ؛ for (var i = 0 ؛ i <this.maxLength ؛ i ++) {this.bogusinputarr [i] .value = real_str [i]؟ real_str real_str.substring (0،6) ؛ this.callback () ؛}} ، getBoxInputValue: function () {var realvalue = "" ؛ for (var i in this.bogusinputarr) {if (! RealValue ؛}}}) () boxInput.init (function () {getValue () ؛}) ؛ document.getElementById ("تأكيد button"). onClick = function ()ما ورد أعلاه هو مربع إدخال كلمة مرور ALIPAY بناءً على JS الذي أدخله المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!