Wie kann ich die HTML-Texteingabe mithilfe von JavaScript so einschränken, dass nur numerische Werte akzeptiert werden?

So beschränken Sie eine HTML-Texteingabe so, dass nur numerische Eingaben zulässig sind

Um eine rein numerische Eingabe in einem HTML-Texteingabefeld zu implementieren, müssen Sie kann die JavaScript-Funktion setInputFilter verwenden. Diese Funktion filtert Eingabewerte umfassend, indem sie Folgendes unterstützt:

• Kopieren und Einfügen-Vorgänge
• Drag-and-Drop-Vorgänge
• Tastaturkürzel
• Kontextmenü-Aktionen
• Nicht schreibbare Schlüssel
• Caret Position
• Verschiedene Tastaturlayouts
• Gültigkeitsfehlermeldungen
• Kompatibilität mit allen Browsern zurück zu IE 9

JavaScript-Code:

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value.
        if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value: restore the previous one.
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value: nothing to restore.
        this.value = "";
      }
    });
  });
}

Verwenden der Funktion:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
}, "Only digits and '.' are allowed");

In diesem Beispiel wird die setInputFilter-Funktion für das „myTextBox“-Element verwendet, um nur numerische Werte zuzulassen. Die Funktion inputFilter verwendet einen regulären Ausdruck, um sicherzustellen, dass die Eingabe ausschließlich aus Ziffern oder einem Dezimalpunkt besteht.

Wichtige Hinweise:

• Server- Seitliche Validierung: Beachten Sie, dass die clientseitige Validierung nicht ausreicht. Sie müssen auch eine serverseitige Validierung für eine sichere Eingabeverarbeitung durchführen.
• Rückgängig-Stack: Diese Lösung unterbricht die Rückgängig-Funktion, indem der Wert direkt festgelegt wird. Daher funktioniert Strg Z nicht für ungültige Eingaben.
• Stilanpassung:Sie können Stile nach Bedarf auf die Klasse „Eingabefehler“ anwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich die HTML-Texteingabe mithilfe von JavaScript so einschränken, dass nur numerische Werte akzeptiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!