web-dev-qa-db-fra.com

Empêcher la saisie non numérique dans le numéro du type d'entrée

L'utilisation de <input type=number> Fera que this.value À l'intérieur d'un écouteur d'événement renvoie une chaîne vide si l'entrée n'est pas un nombre valide. Vous pouvez voir un exemple de ceci à http://jsfiddle.net/fSy53/

Cependant, les caractères non valides sont toujours affichés dans l'entrée.

Existe-t-il un moyen d’obtenir la valeur effectivement affichée , y compris les caractères non valides, dans un écouteur d’événements?

Mon objectif ultime est d'empêcher les utilisateurs de saisir des caractères non numériques dans le champ. Je dois utiliser type=number Pour que le clavier virtuel numérique soit utilisé par les appareils mobiles. Mon objectif serait de faire quelque chose comme this.value = this.value.replace(/[^0-9.]/g, "") sur keyup keypress, Mais cela ne fonctionne pas car si un caractère non valide est saisi, la lecture de this.value Renvoie "".

javascripthtmlhtml5
50
Explosion Pills

Essayez d'éviter le comportement par défaut si vous n'aimez pas la valeur de la clé entrante:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});
63
Glenn Lane

Vous pouvez accomplir cela en empêchant l’événement keyPress de se produire pour des valeurs non numériques.

par exemple (en utilisant jQuery)

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

Cela représente tous les différents types d’entrée (les entrées du pavé numérique, par exemple, ont des codes différents de ceux du clavier), ainsi que le retour arrière, les touches fléchées, les touches de contrôle/cmd + r pour recharger, etc.

21
dlangevin

Veuillez noter que e.which , e.keyCode et e.charCode est obsolète: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which =

Je préfère e.key :

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

Cette fonction n’interfère pas avec les codes de contrôle dans Firefox (Backspace, Tab, etc.) en vérifiant la longueur de la chaîne: e.key.length === 1.

Cela évite également les points en double au début et entre les chiffres: e.key === '.' && contains(e.target.value, '.')

Malheureusement, cela n'empêche pas plusieurs points à la fin: 234....

Il semble qu'il n'y ait aucun moyen de faire face à cela.

12
pavok

Cette solution semble bien fonctionner pour moi. Il s'appuie sur la solution de @ pavok en préservant les raccourcis clavier ctrl.

document.querySelector("input").addEventListener("keypress", function (e) {
  if (
    e.key.length === 1 && e.key !== '.' && isNaN(e.key) && !e.ctrlKey || 
    e.key === '.' && e.target.value.toString().indexOf('.') > -1
  ) {
    e.preventDefault();
  }
});
3
pigeontoe
inputs[5].addEventListener('keydown', enterNumbers);

function enterNumbers(event) {
  if ((event.code == 'ArrowLeft') || (event.code == 'ArrowRight') ||
     (event.code == 'ArrowUp') || (event.code == 'ArrowDown') || 
     (event.code == 'Delete') || (event.code == 'Backspace')) {
     return;
  } else if (event.key.search(/\d/) == -1) {
    event.preventDefault();
  }
}

dans ce cas, la valeur du champ de saisie reste intacte lorsqu'un bouton non numérique est enfoncé, mais les fonctions de suppression, retour arrière, flèche haut-bas-gauche-droite fonctionnent correctement et peuvent être utilisées pour modifier l'entrée numérique.

2
Fevralle

J'ajouterai également MetaKey, car j'utilise MacOS

input.addEventListener("keypress", (e) => {
    const key = e.key;
    if (!(e.metaKey || e.ctrlKey) && key.length === 1 && !/\d\./.test(key)) {
        e.preventDefault();
    }
}

Ou vous pouvez essayer !isNaN(parseFloat(key))

0
Polv

Les autres réponses semblaient plus compliquées que nécessaire, j'ai donc adapté leurs réponses à cette fonction courte et douce.

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

Cela ne changera pas le comportement des touches fléchées, Entrée, Maj, Ctrl ou Tab, car la longueur de la propriété key de ces événements est plus longue qu'un seul caractère. Il utilise également une simple expression régulière pour rechercher tout caractère non numérique.

0
KenCorbettJr

Mise à jour sur la réponse acceptée:

En raison de nombreuses propriétés devenues obsolètes

(propriété) KeyboardEvent.which: number @deprecated

vous devriez simplement vous fier à la propriété key et créer vous-même le reste de la logique:

Le code autorise les touches Entrée, Retour arrière et tous les chiffres [0-9]. Tous les autres caractères sont interdits.

document.querySelector("input").addEventListener("keypress", (e) => {
  if (isNaN(parseInt(e.key, 10)) && e.key !== "Backspace" && e.key !== "Enter") {
      e.preventDefault();
    }
});

NOTE Ceci désactivera l'action de collage

0
Eugene Sunic