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
Der beliebige Upload von Jar-Paketen in Apache Flink führt zu einem Wiederholungsproblem bei der Sicherheitsanfälligkeit bezüglich Remotecodeausführung (Sicherheitswarnung)
Beschreibung der Sicherheitslücke Apache Flink is...
Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios
Inhaltsverzeichnis Vorwort Kern - CancelToken Pra...
So verwenden Sie rsync unter Linux
Inhaltsverzeichnis 1. Einleitung 2. Installation ...
Einführung in Javascript DOM, Knoten und Elementerfassung
Inhaltsverzeichnis DOM Knoten Elementknoten: Text...
JavaScript, um einen Lotterieeffekt zu erzielen
In diesem Artikel wird der spezifische JavaScript...
Gründe und Lösungen für das fehlgeschlagene Einfügen von Emoji-Ausdrücken in MySQL
Fehlerszenario Beim Aufrufen von JDBC zum Einfüge...
Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering
Inhaltsverzeichnis Vorwort 1.1 Funktion 1.2 So st...
Schritte zum Erstellen einer Linux-Umgebung unter Windows mit VMWare (Bild und Text)
Seit ich den Mac zurückgegeben habe, liegt mein u...
Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL
Beim Verknüpfen zweier Tabellen konnte kein Fremd...
So löschen Sie den in Docker erstellten Container
So löschen Sie den in Docker erstellten Container...
Installationsprozess von Zabbix-Agent auf Kylin V10
1. Laden Sie das Installationspaket herunter Down...
Was tun, wenn Sie Ihr MySQL-Passwort vergessen?
Zweimal Ihr MySQL-Passwort vergessen? Zuerst habe...
Tutorial zur Migration von MySQL von phpstudy nach Linux
Projektzweck Migrieren Sie die Daten in MySQL 5.5...
Detaillierte Erklärung, wie man ein Passwort an den SSH/SCP-Befehl im Bash-Skript übergibt
Installieren Sie SSHPASS Für die meisten aktuelle...
Erstellen einer verteilten Selenium-Umgebung basierend auf Docker
1. Laden Sie das Bild herunter Docker-Pull Seleni...