Comment restreindre la saisie de texte HTML pour n'accepter que des valeurs numériques ?

Autoriser uniquement la saisie numérique dans la saisie de texte HTML

Introduction

Les saisies de texte HTML autorisent les utilisateurs pour saisir du texte, mais que se passe-t-il si vous souhaitez limiter la saisie aux chiffres uniquement ? Cela peut être utile pour collecter des données telles que des numéros de compte ou des codes PIN.

Solution JavaScript

Une façon d'y parvenir consiste à utiliser JavaScript. Voici une fonction JavaScript qui filtre les caractères non numériques :

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

Utilisation de la solution

Pour utiliser cette fonction, vous pouvez transmettre une fonction au setInputFilter qui vérifie si l'entrée est numérique :

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

Cela limitera le champ de saisie de texte numericInput à accepter uniquement caractères numériques (et le point décimal).

Remarque

N'oubliez pas d'appliquer la classe CSS d'erreur d'entrée pour styliser le champ de saisie lorsqu'une valeur non valide est saisie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!