How to Restrict HTML Text Input to Only Accept Numeric Values?

Allowing Only Numeric Input in HTML Text Input

Introduction

HTML text inputs allow users to type text, but what if you want to restrict input to numbers only? This can be useful for collecting data such as account numbers or PINs.

JavaScript Solution

One way to achieve this is through JavaScript. Here's a JavaScript function that filters out non-numeric characters:

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 = "";
      }
    });
  });
}

Using the Solution

To use this function, you can pass a function to the setInputFilter that checks if the input is numeric:

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

This will restrict the numericInput text input field to accept only numeric characters (and the decimal point).

Note

Remember to apply the input-error CSS class to style the input field when an invalid value is entered.

The above is the detailed content of How to Restrict HTML Text Input to Only Accept Numeric Values?. For more information, please follow other related articles on the PHP Chinese website!