Comment obtenir la valeur brute d'un <input type="number"> champ?

Question

Comment puis-je obtenir la "vraie" valeur de l' <input type="number"> domaine?

---

J'ai un input boîte, et je suis en utilisant le plus récent d'entrée HTML5 type number:

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

C'est surtout pris en charge dans Chrome 29:

Ce que j'ai maintenant besoin est la capacité à lire le "raw" de la valeur que l'utilisateur a entré dans la zone d'entrée. Si l'utilisateur a entré un numéro:

ensuite, edQuantity.value = 4, et tout est bien.

Mais si l'utilisateur entre des invalides de texte, je veux de la couleur à l'entrée de la boîte rouge:

Malheureusement, pour un type="number" zone de saisie, si la valeur dans la zone de texte n'est pas un numéro, puis de value retourne une chaîne vide:

edQuantity.value = "" (String);

(dans Chrome 29 au moins)

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

j'ai essayé de regarder à travers google Chrome, liste des autres propriétés de la zone de saisie:

je ne vois rien qui ressemble à l'entrée effective.

Ni ce que je pourrais trouver un moyen de dire si la case "vide", ou pas. Peut-être que je pourrais en avoir déduit:

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

Remarque: Vous pouvez ignorer tout ce qui est après la règle horizontale; il est juste de 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 la coloration de la zone rouge (Un exemple: convertir le texte en "four" dans le latin "4" symbole lors de l'événement onBlur)

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

Bonus De Lecture

• jsFiddle de tous les ci-dessus (mise à jour)
• Quirkmode.org l'entrée pour les nouveaux types d'entrée

Answer 1

Selon le WHATWG, vous ne devriez pas être en mesure d'obtenir la valeur, sauf s'il est valable d'entrée numérique. Le nombre d'entrée du champ d'assainissement de l'algorithme dit le navigateur est censé définir la valeur à une chaîne vide si l'entrée n'est pas valide d'un nombre à virgule flottante.

La valeur d'assainissement de l'algorithme est la suivante: Si la valeur de la l'élément n'est pas valide nombre à virgule flottante, puis définissez-la sur le vide chaîne de caractères à la place.

En spécifiant le type (<input type="number">) vous demandez au navigateur de faire un peu de travail pour vous. Si, d'autre part, vous voulez être en mesure de saisir les non-entrée numérique et de faire quelque chose avec elle, vous finiriez par avoir à compter sur l'ancienne essayé et vrai champ de saisie de texte et d'analyser le contenu vous-même.

Le W3 aussi a les mêmes specs et ajoute:

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

Answer 2

Il ne répond pas à la question, mais la solution utile est de vérifier

edQuantity.validity.valid

L' ValidityState d'un objet donne des indices sur ce que l'utilisateur a entré. Considérons un type="number" entrée avec un min et max ensemble

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

Nous avons toujours souhaitez utiliser .validity.valid.

D'autres propriétés uniquement à donner des informations de 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)
{
   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;
}

Bonus

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

Suffit d'utiliser le CSS :invalid sélecteur pour cela.

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

Cela va déclencher votre élément à tourner au rouge à chaque fois qu'un non-numérique valide est entré.

Prise en charge du navigateur pour <input type='number'> est environ le même que :invalid, donc pas de problème là.

Lire plus à propos de :invalid ici.

Answer 3

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

Answer 4

Suivi de toutes les touches pressées, basés sur leurs codes de clé

Je suppose que l'on pouvait écouter le keyup événements et de garder un tableau de tous les caractères saisis, selon leurs codes de touche. Mais c'est une jolie tâche fastidieuse et probablement sujettes à des bugs.

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

Sélectionnez l'entrée et obtenez la sélection comme une chaîne de caractères

input.select(); 
var value = window.getSelection().toString();

Tout le crédit à: int32_t