So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen

Beschränken Sie input Eingabefeld auf reine Zahlen

1、onkeyup = "value=value.replace(/[^\d]/g,'')"

Bei der Verwendung des Ereignisses onkeyup tritt bug auf. Wenn Sie bei der chinesischen Eingabemethode ein chinesisches Zeichen eingeben und dann die Eingabetaste drücken, wird der Buchstabe direkt eingegeben.

2、onchange = "value=value.replace(/[^\d]/g,'')"

Wenn Sie onchange -Ereignis verwenden, wird das Ergebnis nach der Eingabe von Inhalten erst abgerufen, wenn input den Fokus verliert, und es erfolgt keine Reaktion bei der Eingabe.

3、oninput = "value=value.replace(/[^\d]/g,'')"

Die Verwendung oninput Ereignisses löst die beiden oben genannten Probleme perfekt und im Test sind bisher keine weiteren Probleme aufgetreten.

Codebeispiel

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8" />
    <title>Eingabe</title>
</Kopf>
<Text>
    Ein Eingabefeld, in das nur reine Zahlen eingegeben werden können: <input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
</body>
</html>

Dies ist das Ende dieses Artikels darüber, wie Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen beschränken können. Weitere relevante HTML-Inhalte zum Beschränken der Eingabe auf Zahlen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Detaillierte Erläuterung der Rolle von overflow:hidden (Überlauf verbergen, Floats löschen, Randkollaps beheben)

>>:  Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

Artikel empfehlen

Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3

Dieser Artikel stellt den Beispielcode zur Implem...

Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen

Das Konzept des relativen Pfades Verwenden Sie de...

So geben Sie Speicherplatz unter CentOS 6 oder CentOS 7 frei

Nachfolgend finden Sie die Schnellbefehle zum Fre...

Tools zur Bildoptimierung für Webseiten und Tipps zur Verwendung

Als grundlegendes Element einer Webseite sind Bil...

Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

In diesem Artikel wird hauptsächlich erläutert, w...

So installieren und implementieren Sie Zabbix 5.0 für Nginx

Inhaltsverzeichnis Experimentelle Umgebung Instal...

Vue implementiert kleine Suchfunktion

In diesem Artikelbeispiel wird der spezifische Co...

CSS3-Mauszeiger-Übergangszoomeffekt

Das Folgende ist ein Bild-Zoom-Effekt, der in rei...

Detaillierte Erklärung zum Lay-Loading von JavaScript

Inhaltsverzeichnis Lazy Loading CSS-Stile: HTML-T...

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

Inhaltsverzeichnis Jenkins-Installation Installie...

Implementierung der Codeaufteilung von Webpack3+React16

Projekthintergrund Seit kurzem gibt es ein Projek...

Erfahren Sie, wie Sie Vue3 Reactivity implementieren

Inhaltsverzeichnis Vorwort Start Ein kleiner Geda...

CocosCreator implementiert Skill-Kühleffekt

CocosCreator realisiert Skill-CD-Effekt In vielen...

Detaillierte Erläuterung des React setState-Datenaktualisierungsmechanismus

Inhaltsverzeichnis Warum setState verwenden? Verw...

HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil

Erster Blick auf die Wirkung: Vorwort: Auf diese ...