Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode
VorwortDieser Artikel beschreibt eine allgemeine SMS-Bestätigungscode-Eingabekomponente für das Front-End, die ich manuell implementiert habe, sowie den Prozess der schrittweisen Optimierung von der Nachfrage bis zur Implementierung. Text1. Bedarfsanalyse Schauen wir uns zunächst die Renderings an.
Wenn die Seite geladen wird, erhält zunächst das Eingabefeld den Fokus. Wenn der Benutzer eine Zahl eingibt, springt der Fokus automatisch zum zweiten Feld. Wenn alle vier Felder ausgefüllt sind, wird die Übermittlungsanforderung simuliert. Hier wird eine Popup-Fensteraufforderung verwendet, um den Inhalt des Eingabeüberprüfungscodes auszugeben. Anforderungen außerhalb des Hauptprozesses: In das Eingabefeld können nur Zahlen eingegeben werden, keine Buchstaben. Wenn die Eingabe eines nicht numerischen Typs erzwungen wird, wird der beim Drücken der Abhebungstaste eingegebene Bestätigungscode gelöscht und der aktuelle Fokus springt zum ersten Eingabefeld. 2. Codeimplementierung abschließen. Die allgemeine Idee besteht darin, beim Laden der Seite dem ersten Eingabefeld das Autofokus-Attribut hinzuzufügen, damit es automatisch den Fokus erhält, und dann auf Tastaturklickereignisse zu warten. Wenn die Tastatur gedrückt wird, wird festgestellt, ob die aktuelle Taste eine Zifferntaste ist. Wenn nicht, wird das aktuelle Eingabefeld auf leer gesetzt und der Fokus befindet sich noch immer im aktuellen Eingabefeld. Wenn es eine Zahl ist, wird festgestellt, ob sich im vorherigen Eingabefeld eine Zahl befindet. Wenn nicht, wird der Fokus auf das vorherige leere Eingabefeld verschoben. Andernfalls wird das aktuelle Eingabefeld geöffnet und der Fokus auf das nächste Eingabefeld verschoben. Der Fokus wird durch eine Pseudoklasse des Eingabefelds implementiert. Wenn die Eingabelänge 4 beträgt, werden die Zahlen in jedem Eingabefeld zu einer Zeichenfolge verkettet und über ein Popup-Fenster angezeigt.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-kompatibel" content="IE=edge" />
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
<title>Dokument</title>
<Stil>
.check-div {
Breite: 400px;
Höhe: 600px;
Rand: 100px automatisch;
Rand: 1px durchgehend schiefergrau;
Textausrichtung: zentriert;
}
h1 {
Schriftgröße: 24px;
}
.Eingabe-div {
Rand oben: 100px;
}
Eingabe {
Rand links: 5px;
Textausrichtung: zentriert;
Breite: 50px;
Höhe: 50px;
Rand: keiner;
/* Beachten Sie, dass die standardmäßigen äußeren Rahmenattribute hier geändert werden sollten, ohne Rahmen*/
Umriss: 1px tiefschwarz;
}
Eingabe:Fokus {
Umriss: 2px durchgezogen #3494fe;
}
</Stil>
</Kopf>
<Text>
<div Klasse="check-div">
<h1>Bitte geben Sie den Bestätigungscode ein</h1>
<div Klasse="Eingabe-div">
<Eingabe
Typ="Text"
Klasse="inputItem0"
Datenindex="0"
maximale Länge = "1"
Autofokus
/>
<input Typ="Text" Klasse="inputItem1" Datenindex="1" maxlength="1" />
<input Typ="Text" Klasse="inputItem2" Datenindex="2" maxlength="1" />
<input Typ="text" Klasse="inputItem3" Datenindex="3" maxlength="1" />
</div>
</div>
<Skript>
var inputArr = document.getElementsByTagName("Eingabe");
window.addEventListener("keyup", (e) => {
let curIndex = e.target.getAttribute("data-index"); //Index der aktuellen Eingabe abrufen //Wenn Sie die BackSpace-Taste drücken, wird hier alles gelöscht if (e && e.keyCode == 8) {
konsole.log(22222222222);
für (lass j = 0; j <= 3; j++) {
EingabeArr[j].Wert = "";
EingabeArr[0].Fokus();
}
zurückkehren;
}
console.log("e.keyCode", e.keyCode);
//Wenn die Eingabe keine Zahl istif (!(e.keyCode >= 48 && e.keyCode <= 57)) {
konsole.log(1111111111);
inputArr[aktuellerIndex].Wert = "";
gibt false zurück;
}
//Durchlaufe die Array-Werte und verkette sie zu einem Bestätigungscode-String var str = "";
für (lass j = 0; j <= 3; j++) {
Konsole.log(EingabeArr[j].Wert);
str += EingabeArr[j].Wert;
}
var nächsterIndex = Zahl(aktuellerIndex) + 1;
//Wenn beurteilt wird, dass nicht genügend vierstellige Bestätigungscodes vorhanden sind, if (curIndex < 3 && str.length < 4) {
für (lass i = 0; i <= aktuellerIndex; i++) {
//Überprüfen ob das vorherige leer ist oder nicht, wenn ja, Fokus nach vorne verschieben und die Eingabe wieder nach vorne stellen, sonst zum nächsten springen if (!inputArr[i].value) {
inputArr[aktuellerIndex].blur();
EingabeArr[i].Wert = EingabeArr[aktuellerIndex].Wert;
var index = i + 1;
EingabeArr[index].fokus();
inputArr[aktuellerIndex].Wert = "";
zurückkehren;
} anders {
var nächsterIndex = Zahl(aktuellerIndex) + 1;
inputArr[nächsterIndex].fokus();
}
}
} anders {
alert("Der übermittelte Bestätigungscode ist " + str);
//Wenn ein vierstelliger Bestätigungscode eingegeben wird, kann eine Bestätigungscode-Anforderung gesendet werden usw.}
});
</Skript>
</body>
</html>ZusammenfassenDies ist das Ende dieses Artikels über die manuelle Implementierung des Eingabefelds für den js-SMS-Bestätigungscode. Weitere relevante Inhalte für das Eingabefeld für den js-SMS-Bestätigungscode finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]
Artikel empfehlen
Detaillierte Erläuterung des Prozesses zur Verwendung von Docker zum Erstellen von Minio und Java SDK
Inhaltsverzeichnis 1minio ist einfach 2 Docker er...
Implementierung der Docker-Bereitstellung von Webprojekten
Im vorherigen Artikel wurde der Docker-Dienst ins...
So deinstallieren Sie MySQL sauber (getestet und effektiv)
Wie deinstalliere ich Mysql vollständig? Befolgen...
So installieren Sie Docker mithilfe von Skripten unter Linux Centos
Was ist die Hauptfunktion von Docker? Derzeit gib...
CentOS7-Konfiguration Alibaba Cloud Yum-Quellmethodencode
Öffnen Sie den Centos Yum-Ordner Geben Sie den Be...
Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse
Warum sind die von Ihnen geschriebenen SQL-Abfrag...
Ein-Klick-Installation von MySQL 5.7 und Methode zur Änderung der Kennwortrichtlinie
1. Ein-Klick-Installation des Mysql-Skripts [root...
MySQL 5.6-Binärinstallationsprozess unter Linux
1.1 Download des binären Installationspakets wget...
Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos
Wie können wir den Fehler lokalisieren, wenn im S...
Detaillierte Erklärung des Responsive-Prinzips von Vue3
Inhaltsverzeichnis Überprüfung der responsiven Pr...
Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.
Vorwort Als intensiver Benutzer von Front-End-Fra...
Die spezifische Verwendung und der Unterschied zwischen Attribut und Eigenschaft in Vue
Inhaltsverzeichnis Als Attribut- und Eigenschafts...
Detailliertes Tutorial zur Installation von Docker unter Windows
Da meine lokale MySQL-Version relativ niedrig ist...
JS-Code zum Erzielen eines Seitenwechseleffekts
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für die verstümmelte Anzeige von Linux SecureCRT
Sehen wir uns die Situation an, in der SecureCRT ...