Obtenir la valeur de <input type=“number”> JS lorsqu'elle contient des caractères non numériques

Cette jsfiddle démontre le problème suivant.

L'exemple le plus simple est:

<input id="number" type="number" value="1">
console.log(document.getElementById('number').value);

Ce journaux 1 comme prévu. CECI cependant:

<input id="number" type="number" value="1A">
console.log(document.getElementById('number').value);

De session à une chaîne vide ", en raison du caractère non numérique dans la valeur. Certains appareils+navigateurs (Chrome par exemple) vous permettent de saisir des caractères non numériques dans ces entrées.

C'est ennuyeux parce que je veux que le type="nombre" d'entrée pour les appareils compatibles (ex: iPhone, iPad clavier numérique). Cependant je veux utiliser javascript pour arrêter sale d'entrée de l'entrée - qui nécessite l'extraction de la valeur sur keyup - alors regex remplacement de la non-numérique caractères.

Il apparaît de jQuery .val() la méthode donne le même résultat.

Ne pas empêcher la saisie de l'utilisateur, c'est très ennuyeux. Vérifier la valeur sur keyup et si la valeur n'est pas valide, l'affichage d'un discret message pour avertir l'utilisateur que la valeur n'est pas valide et laissez-les réparer eux-mêmes. Vous ne se soucient que c'est une valeur valide lors de l'envoi vers le serveur, dans l'intervalle, la valeur peut être ce que. Oh, et Firefox affiche la valeur de l'entrée.
Ont la inputefields seulement le type=number sur les appareils iOS, si vous voulez que la méthode de saisie
Pourquoi avez-vous besoin de la valeur? Vous pouvez savoir ce qui va être inséré à partir des événements de clavier.
merci je ne peux pas croire que je n'ai pas pensé à ça!

OriginalL'auteur captainclam | 2013-03-26

  1. 4

    C'est ce que je cherchais:

    $('input[type=number]').keypress(function(e) {
  if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
    return false;
  }
});

    Je comprends la prévention de la saisie de l'utilisateur peut être gênant et cela permet toujours d'une entrée non valide comme 1.2.3

    Cependant, dans cette situation, c'est exactement ce dont j'avais besoin. J'espère que ça sera utile à quelqu'un d'autre. Grâce à @int32_t pour la suggestion.

    OriginalL'auteur captainclam

  2. 0

    Vous n'êtes pas censé utiliser <input type=number> pour des choses qui ne sont pas des nombres (en très mathématique sens—il ne fonctionnera pas pour les numéros de téléphone ou de codes postaux) et de la compensation de la valeur de est délibérée.

    Vous pouvez tester si l'appareil prend en charge type=number et le joindre à votre secours uniquement si elle n'est pas le cas:

    var input = document.createElement('input');
input.setAttribute('type','number');
if (input.type != 'number') { //JS property won't reflect DOM attribute
   polyfill_number();
}

    Sinon (surtout si votre numéro est un code postal, numéro de série, etc.) vous pouvez utiliser:

    <input type=text pattern="[0-9]*">

    et cela va changer le clavier aussi.

    <input type=text pattern="[0-9]*"> ne permettra pas de clavier numérique sur Andorid appareils.

    OriginalL'auteur Kornel