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

Comment restreindre une saisie de texte HTML pour autoriser uniquement la saisie numérique

Pour implémenter une saisie numérique uniquement dans un champ de saisie de texte HTML, vous peut utiliser la fonction JavaScript setInputFilter. Cette fonction filtre de manière exhaustive les valeurs d'entrée en prenant en charge :

• Opérations de copier-coller
• Opérations de glisser-déposer
• Raccourcis clavier
• Actions du menu contextuel
• Touches non tapables
• Caret position
• Différentes dispositions de clavier
• Messages d'erreur de validité
• Compatibilité avec tous les navigateurs jusqu'à IE 9

Code JavaScript :

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

Utilisation du Fonction :

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

Dans cet exemple, la fonction setInputFilter est utilisée sur l'élément "myTextBox" pour autoriser uniquement les valeurs numériques. La fonction inputFilter utilise une expression régulière pour garantir que l'entrée se compose uniquement de chiffres ou d'un point décimal.

Remarques importantes :

• Serveur- Validation côté : Notez que la validation côté client n'est pas suffisante. Vous devez également effectuer une validation côté serveur pour une gestion sécurisée des entrées.
• Annuler la pile : Cette solution interrompt la fonctionnalité d'annulation en définissant directement la valeur. Par conséquent, Ctrl Z ne fonctionnera pas pour les entrées non valides.
• Personnalisation du style : Vous pouvez appliquer des styles à la classe « erreur d'entrée » selon vos besoins.

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!