JS implementiert die Funktion des sechsstelligen Zeichenkennworteingangs

Die alten Regeln ~ Wenn Sie zur Demo gehen, haben Sie zuerst Spaß: ein sechsstelliges Zeichenkennworteingangsgerät

Fügen Sie dann den Quellcode hinzu: sechsstelliger Zeichenkennworteingang

Aus Demo kann ich sehen, dass zuerst nur sechs Zeichen eingegeben werden können und nur Zahlen eingegeben werden dürfen. Nachdem die Eingabe von sechs Ziffern abgeschlossen ist, wird automatisch ein Rückruf ausgeführt (das Eingabeergebnis wird in der Demo angezeigt)

1. Lassen Sie uns zuerst über das Prinzip sprechen

Zunächst brauchen wir zwei Dinge: Eins ist ein echtes Eingabefeld, dh es steht wirklich im Fokus und erhält die Eingabeeingabeeingabe des Benutzers. Das andere ist eine Reihe von Pseudo -Eingangsfeldern, das heißt, es erhält den Fokus nicht wirklich, zeigt jedoch nur den aktuell eingegebenen Wert an (natürlich ist das Passwort nur ein kleiner schwarzer Punkt ~).

Zweitens müssen wir einfach sein und keine Angst davor haben, damit sich ein Satz von (6) gefälschten Elementen direkt unter dem realen Eingabefeld überlappen kann. wie folgt:

Es gibt tatsächlich keinen Rand ~, nur um es klarer zu sehen.

Darüber hinaus müssen wir die obere Real-Eingangs-Box OpCity auf 0 einstellen, so dass der dem Benutzer angegebene Benutzer dieser Satz gefälschter Eingabefelder ist.

Wenn der Benutzer jedoch erneut eintritt, arbeitet er immer noch im realen Eingangsfeld. Danach werden wir die Eingabe des Benutzers in das geschmiedete Eingabefeld nacheinander ausfüllen ~

Sehr einfach ~

2. Code Code

Erstens wird das einzelne DOM initialisiert und das Eingabeereignis gebunden.

 Funktion init (fun) {var that = this; this.callback = fun; that.realinput = container.Children [0]; that.bogusinputarr [0] .getAttribute ("maxLength"); that.realinput.oninput = function () {that.setValue ();}, dass

Wenn dann die Benutzereingabe eingegeben wird, wird die Benutzereingabe in das gefälschte Eingabefeld eingegeben

 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]: "";} if (real_str.length> = this.maxLength) {this.realInput.value = real_str.substring (0,6); this.callback ();}}

Schließlich müssen wir das Passwort erhalten ~, lassen Sie uns eine Methode zum Endwert erhalten ~

 Funktion getboxInputValue () {var realValue = ""; für (var i in this.bogusinputarr) {if (! this.bogusinputarr [i] .Value) {break;} RealValue += this.boguSinputarr [i] .Value;

Das obige ist die JS-Implementierung der vom Editor eingeführten sechsstelligen Kennworteingabefunktion. 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!