Dieser Artikel implementiert eine Schnittstelle, die dem Alipay -Zahlungskennwort ähnelt, das nur Zahlen eingeben kann und nur 6 Ziffern eingegeben werden können.
Lassen Sie mich zunächst die Renderings zeigen. Wenn Sie sich gut fühlen, wenden Sie sich bitte an den Implementierungscode.
1. Stilblatt
.wrap {margin: 10px auto; width: 329px; Höhe: 640px; padding-top: 200px;}. InputBoxContainer {Breite: 240px; Höhe: 50px; Margin: 0 auto; Solid; Border-Radius: 7px; -Moz-Border-Radius: 7px; -Webkit-Border-Radius: 7px; Überlauf: Hidden; Position: Absolute; Z-Index: 0; 1; Filter: Alpha (Opazität = 0); Solid;}. InputBoxContainer .Bogusinput Input: Last-Child {Border: None;}. BestätigungButton {Breite: 240px; Höhe: 45px; Border-Radius: 7px; -Moz-Border-Radius: 7px; -Webkit-Border-Radius: 7px; Hintergrund: #f4f4f4f4f4f4; Block; Schriftgröße: 16px; Rand: 30px Auto;2. HTML -Code
<div> <div id = "inputBoxContainer"> <Eingabe type = "text"/> <div> <Eingabe type = "password" maxLength = "6" deaktiviert/> <Eingabe type = "passwart" maxLength = "6" deaktiviert/> <Eingabe type = "kennwort" maxLength = "6" (disabled/Eingabe type ". 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" deaktiviert/> <Eingabetyp = "Passwort" maxLength = "6" Deaktiviert/> <Eingabetyp = "Passwort" maxLength = "6" deaktiviert/</div> </div> <Button ID = "BestätigungButton"> Ansicht </button> <p id = "showValue"> </p> </div> </div>
3. JS Code Control Logic Effect
(function () {var container = document.getElementById ("inputBoxContainer"); Boxinput = {maxLength: "", Realinput: "", Bogusinput: "", boiNputarr: "", Rückruf: "", init: function (fun) {var this this this.callback = fun = thatusing = thatusing = this.ra.ra.Realin. Container.Children [1]; function () {that.setValue ();}}, setValue: function () {this.realinput.value = this.realinput.value.replace (// d/g, ""); console.log (this.realinput.Value.Replace (//). = 0; i <this.maxLength; real_str.substring (0,6); this.callback ();}}, getBoxInputValue: function () {var realValue = ""; für (var i in diesem. RealValue;}}}) () Boxinput.init (function () {getValue ();}); document.getElementById ("ebbutton"). onclick = function () {getValue ();} function getValue () {document.getByIdByid ("showValue").).).).).).).).).).).).).).).).).).).).Das obige ist das Alipay Payment Password -Eingabefeld basierend auf JS, das vom Editor eingeführt wurde. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!