Wie beschränke ich die HTML-Texteingabe so, dass nur numerische Werte akzeptiert werden?

Nur ​​numerische Eingabe bei der HTML-Texteingabe zulassen

Einführung

HTML-Texteingaben ermöglichen Benutzern um Text einzugeben, aber was ist, wenn Sie die Eingabe nur auf Zahlen beschränken möchten? Dies kann nützlich sein, um Daten wie Kontonummern oder PINs zu sammeln.

JavaScript-Lösung

Eine Möglichkeit, dies zu erreichen, ist JavaScript. Hier ist eine JavaScript-Funktion, die nicht numerische Zeichen herausfiltert:

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 Lösung

Um diese Funktion zu verwenden, können Sie eine Funktion an setInputFilter übergeben Prüft, ob die Eingabe numerisch ist:

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

Dadurch wird das Texteingabefeld „numericInput“ auf das Akzeptieren beschränkt numerische Zeichen (und der Dezimalpunkt).

Hinweis

Denken Sie daran, die CSS-Klasse „input-error“ anzuwenden, um das Eingabefeld zu formatieren, wenn ein ungültiger Wert eingegeben wird.

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