Maison > interface Web > js tutoriel > Comment restreindre la saisie de texte HTML aux valeurs numériques uniquement ?

Comment restreindre la saisie de texte HTML aux valeurs numériques uniquement ?

Patricia Arquette
Libérer: 2024-12-17 05:35:25
original
380 Les gens l'ont consulté

How to Restrict HTML Text Input to Numeric Values Only?

Comment autoriser uniquement la saisie numérique dans le champ de saisie de texte HTML

On peut exploiter la fonction setInputFilter de JavaScript pour restreindre la saisie de l'utilisateur dans les champs de saisie de texte à caractères numériques et points décimaux ('.') :

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)) {
                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")) {
                this.classList.add("input-error");
                this.setCustomValidity(errMsg);
                this.reportValidity();
                this.value = this.oldValue;
                this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
            } else {
                this.value = "";
            }
        });
    });
}
Copier après la connexion

Pour imposer la saisie numérique, utilisez ce qui suit filter :

setInputFilter(document.getElementById("myTextBox"), function (value) {
    return /^\d*\.?\d*$/.test(value); 
});
Copier après la connexion

Ce filtre valide la saisie par rapport à l'expression régulière ^d*.?d*$, qui accepte les chaînes contenant uniquement des chiffres, des points décimaux ou une combinaison des deux.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal