Home > Web Front-end > JS Tutorial > How to Restrict HTML Text Input to Only Accept Numeric Values?

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

DDD
Release: 2024-12-15 13:52:26
Original
368 people have browsed it

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

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");
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template