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
Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL
Detailliertes Beispiel zum Abrufen des Maximalwer...
Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios
Inhaltsverzeichnis Ideen Abfangen von Anfragen An...
Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle
A. Installation des MySQL-Sicherungstools xtrabac...
Sollte ich für das mobile Web-WAP Bootstrap oder jQuery Mobile verwenden?
Lösung des Problems Bootstrap ist ein CSS-Framewo...
So verwenden Sie vs2019 für die Linux-Remote-Entwicklung
Normalerweise gibt es bei der Entwicklung von Lin...
Erstellen, Einschränkungen und Löschen von Fremdschlüsseln in MySQL
Vorwort Ab MySQL-Version 3.23.44 unterstützen Inn...
Detaillierte Erläuterung der MySQL-Lösung zur USE DB-Überlastung
Wenn wir auf einen Fehler stoßen, denken wir oft ...
Implementierung effektiver Benutzergruppen und anfänglicher Benutzergruppen in Linux
Überprüfen Sie zuerst die Datei /etc/group: [root...
10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte
Inhaltsverzeichnis 1. Nutzen Sie Slots, um Kompon...
Implementierungsmethode für HTML-Neun-Raster-Layouts
Die Diversifizierung von Website-Layouts ist unse...
MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen
1. Übersicht Beim täglichen Betrieb und bei der W...
Detailliertes Beispiel für die Verwendung von Typescript zum Einkapseln von Axios in Vue3
Dieses Axios-Paket wird in der Vue3-Demo verwende...
Zusammenfassung zum Sharding von MySQL-Datenbanken und -Tabellen
Während der Projektentwicklung werden unsere Date...
Detaillierte Verwendung des Vue More Filter-Widgets
In diesem Artikelbeispiel wird die Implementierun...