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
Austausch von Ideen zur Verarbeitung von Millionen von Daten in einer einzigen MySQL-Tabelle
Inhaltsverzeichnis Projekthintergrund Verbesserun...
mysql5.6.zip-Format komprimierte Version Installations-Grafik-Tutorial
Vorwort: MySQL ist ein relationales Datenbankverw...
Installations-JDK-Tutorialanalyse für Linux-System (Centos6.5 und höher)
Artikelstruktur 1. Vorbereitung 2. Installieren S...
Detaillierte Erläuterung der Verwendung und der zugrunde liegenden Prinzipien von MySQL-Tabellenpartitionen
Inhaltsverzeichnis Was ist eine Partitionstabelle...
So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)
Die Standardanordnung von Text in HTML ist horizo...
Vergleich der Vorteile von vue3 und vue2
Inhaltsverzeichnis Vorteil 1: Optimierung des Dif...
Detaillierte Erklärung des Docker-Bereitstellungstutorials für Jenkins-Anfänger
Dieser Artikel stellt Jenkins+Maven+SVN+Tomcat üb...
Welche Nachteile hat die Bereitstellung der Datenbank in einem Docker-Container?
Vorwort Docker erfreut sich seit zwei Jahren groß...
Bootstrap3.0-Studiennotizentabelle bezogen auf
In diesem Artikel werden hauptsächlich Tabellen e...
Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm
Inhaltsverzeichnis Installieren Sie CentOS7 Konfi...
WebStorm kann die Lösung der Vue3-kombinierten API nicht korrekt identifizieren
1 Problembeschreibung Die kombinierte API von Vue...
Detailliertes Beispiel zum Entfernen doppelter Daten in MySQL
Detailliertes Beispiel zum Entfernen doppelter Da...
Einführung in das MySQL Connection Control Plugin
Inhaltsverzeichnis 1. Einführung in das Verbindun...
Allgemeine Vorgänge des Web-Frontends (einschließlich JS/HTML/CSS und anderer Wissensaspekte)
Löschen Sie das Symbol 1 vor ul li Wert löschen 1 ...
Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS
Inhaltsverzeichnis falten (reduzieren) Verwenden ...