jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
|
Gewünschte Wirkung: Nach dem Klick auf die Übermittlung des Bestätigungscodes wird der Button deaktiviert und nach 5 Sekunden wieder aktiviert.
Schaltfläche nach dem Klicken auf „Senden“ deaktivieren
Nach 5 Sekunden die Sperre aufheben und erneut senden
Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<Text>
<Eingabetyp="Text">
<input type="button" value="Senden">
<script src="js/jquery-1.12.4.min.js"></script>
<Skript>
// Holen Sie sich das Element var $btn = $("input:button")
// Schaltflächenklickereignis hinzufügen $btn.click(function () {
// Definieren Sie eine Variable zum Speichern der Zeitzahl var n = 5;
// Button deaktivieren // Textinhalt des Buttons ersetzen $(this).prop("disabled",true).val(n + "s und dann nochmal senden")
//Ändere den Countdown-Inhalt alle 1 s.//Verwende den Timer, um die Zeit alle 1 s zu reduzierenvar timer = setInterval(() => {
N--;
// Der Textinhalt ändert sich // Der Standardwert innerhalb des Timers ist window
$(this).val(n + "s nach dem erneuten Senden")
// Wenn die Zeit 0 erreicht, stoppe den Timer if (n <= 0) {
Intervall löschen(Timer)
// Nach 5 Sekunden müssen Sie mit dem Senden des Textes fortfahren. // Deaktivieren Sie die Schaltfläche $(this).val("Resend").prop("disabled",false)
}
},1000)
})
</Skript>
</body>
</html>Dies ist das Ende dieses Artikels zum Deaktivieren der Schaltfläche zum Senden des Bestätigungscodes mithilfe von jQuery. Weitere Informationen zum Deaktivieren der jQuery-Schaltfläche finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Docker-Installation Tomcat Dubbo-Admin-Instanz-Kenntnisse
>>: Detaillierte Erklärung zur Verwendung von Join zur Optimierung von SQL in MySQL
Artikel empfehlen
Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner
1. Was sind die Vorlagen für ASP.NET-Webanwendunge...
Lösung für großen Zeilenabstand (5 Pixel mehr im IE)
Code kopieren Der Code lautet wie folgt: li {Brei...
So ändern Sie das Root-Passwort von MySQL in Docker
Der erste Schritt besteht darin, einen MySQL-Cont...
Detaillierte Erklärung des Docker Compose-Orchestrierungstools
Docker Compose Docker Compose ist ein Tool zum De...
Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen
Das Popup hat nichts damit zu tun, ob Ihr aktuelle...
MySql-Import - CSV-Datei oder tabulatorgetrennte Datei
Manchmal müssen wir Daten aus einer anderen Bibli...
Lösung für den Fehler „Mehrere Primärschlüssel definiert“ in MySQL
Es gibt zwei Möglichkeiten, einen Primärschlüssel...
Detaillierte Erklärung zur Verwendung der JavaScript-Zwischenablage
(1) Einleitung: clipboard.js ist ein leichtes Jav...
Dateifreigabe zwischen Ubuntu und Windows unter VMware
In diesem Artikel wird die Methode zum Teilen von...
So stellen Sie K8s in Docker bereit
K8s k8s ist ein Cluster. Es gibt mehrere Namespac...
CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).
Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...
Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0
Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...
Ausführliches Tutorial zur Installation von WinX64 unter MySQL8.0.18 (mit Bildern und Text)
Gehen Sie zu https://dev.mysql.com/downloads/mysq...
100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)
Vorwort „Wenn es um Bildbearbeitung geht, denken ...
Installieren Sie OpenSSH unter Windows und melden Sie sich beim Linux-Server an, indem Sie einen SSH-Schlüssel generieren.
Der vollständige Name von SSH ist Secure SHell. D...