Comment puis-je obtenir la valeur "réelle" d'un <input type="number">champ?

J'ai une inputboîte et j'utilise un type d'entrée HTML5 plus récent number:

<input id="edQuantity" type="number">

Ceci est principalement pris en charge dans Chrome 29:

Ce dont j'ai besoin maintenant, c'est la capacité de lire la valeur «brute» que l'utilisateur a entrée dans la zone de saisie. Si l'utilisateur a saisi un numéro:

puis edQuantity.value = 4, et tout va bien.

Mais si l'utilisateur entre un texte invalide, je veux colorer la zone de saisie en rouge:

Malheureusement, pour une zone de type="number"saisie, si la valeur de la zone de texte n'est pas un nombre, alors valuerenvoie une chaîne vide:

edQuantity.value = "" (String);

(au moins dans Chrome 29)

Comment puis-je obtenir la valeur "brute" d'un <input type="number">contrôle?

J'ai essayé de parcourir la liste des autres propriétés de la zone de saisie de Chrome:

je n'ai rien vu qui ressemble à l'entrée réelle.

Je ne pourrais pas non plus trouver un moyen de savoir si la boîte "est vide" ou non. J'aurais peut-être pu déduire:

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

Remarque : vous pouvez tout ignorer après la règle horizontale; c'est juste du remplissage pour justifier la question. Aussi: ne confondez pas l'exemple avec la question. Les gens pourraient vouloir la réponse à cette question pour des raisons autres que de colorer la boîte en rouge (un exemple: convertir le texte "four"en "4"symbole latin pendant l'événement onBlur)

Comment puis-je obtenir la valeur "brute" d'un <input type="number">contrôle?

Lecture bonus

• jsFiddle de tout ce qui précède (mis à jour)
• Entrée Quirkmode.org pour les nouveaux types d'entrée

Selon le WHATWG , vous ne devriez pas pouvoir obtenir la valeur à moins qu'il s'agisse d'une entrée numérique valide. L'algorithme de nettoyage du champ de nombre d'entrée indique que le navigateur est censé définir la valeur sur une chaîne vide si l'entrée n'est pas un nombre à virgule flottante valide.

L' algorithme de nettoyage des valeurs est le suivant: Si la valeur de l'élément n'est pas un nombre à virgule flottante valide , définissez-le à la place sur la chaîne vide.

En spécifiant le type (<input type="number"> ), vous demandez au navigateur de faire un travail pour vous. Si, d'un autre côté, vous souhaitez être en mesure de capturer l'entrée non numérique et d'en faire quelque chose, vous devez vous fier à l'ancien champ de saisie de texte éprouvé et analyser le contenu vous-même.

Le W3 a également les mêmes spécifications et ajoute:

Les agents utilisateurs ne doivent pas autoriser l'utilisateur à définir la valeur sur une chaîne non vide qui n'est pas un nombre à virgule flottante valide.

Cela ne répond pas à la question, mais la solution de contournement utile consiste à vérifier

edQuantity.validity.valid

Le ValidityStated'un objet donne des indices sur ce que l'utilisateur a entré. Considérez une type="number"entrée avec un minet un maxensemble

<input type="number" min="1" max="10">

Nous voulons toujours utiliser .validity.valid.

D'autres propriétés ne donnent que des informations bonus:

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

Vous devrez vous assurer que le navigateur prend en charge la validation HTML5 avant de l'utiliser:

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

Prime

Spudly a une réponse utile qu'il a supprimée:

Utilisez simplement le :invalidsélecteur CSS pour cela.

input[type=number]:invalid {
    background-color: #FFCCCC;
}

Cela déclenchera votre élément pour devenir rouge chaque fois qu'un valide non numérique est entré.

Le support du navigateur pour <input type='number'>est à peu près le même que :invalid, donc pas de problème là-bas.

En savoir plus :invalid ici .

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

Suivre toutes les touches enfoncées en fonction de leurs codes de touche

Je suppose que l'on pourrait écouter les événements keyup et conserver un tableau de tous les caractères entrés, en fonction de leurs codes clés. Mais c'est une tâche assez fastidieuse et probablement sujette à des bugs.

http://unixpapa.com/js/key.html

Sélectionnez l'entrée et obtenez la sélection sous forme de chaîne

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

Tout le crédit à: int32_t