web-dev-qa-db-fra.com

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

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

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

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

Ceci est principalement supporté dans Chrome 29:

enter image description here

Ce dont j'ai maintenant besoin, c'est de pouvoir lire la valeur "raw" que l'utilisateur a entrée dans la zone de saisie. Si l'utilisateur a entré un numéro:

enter image description here

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

Mais si l'utilisateur entre du texte invalide, je souhaite colorier le champ de saisie en rouge:

enter image description here

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

edQuantity.value = "" (String);

(in Chrome 29 au moins)

Comment puis-je obtenir le "raw" valeur 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:

enter image description here

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

Je ne pouvais pas non plus trouver un moyen de savoir si la boîte "est vide", ou non. J'aurais peut-être pu en 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; il suffit de justifier la question. Aussi: ne confondez pas l'exemple avec la question. Les gens voudront peut-être répondre à cette question pour des raisons autre que de colorier la boîte en rouge (un exemple: conversion du texte "four" dans le latin "4" symbole pendant l'événement onBlur)

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

Lecture bonus

javascripthtml5validationinput
110
Ian Boyd

Selon le WHATWG , vous ne devriez pas pouvoir obtenir la valeur à moins que ce ne soit une entrée numérique valide. L'algorithme de désinfection du champ de numéro d'entrée indique que le navigateur est supposé définir une valeur comme chaîne vide si l'entrée n'est pas un nombre à virgule flottante valide.

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

En spécifiant le type (<input type="number">) vous demandez au navigateur de travailler pour vous. Si, par contre, vous souhaitez pouvoir capturer une entrée non numérique et en faire quelque chose, vous devez vous appuyer sur l'ancien champ de saisie de texte éprouvé et vrai et analyser le contenu vous-même.

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

Les agents d'utilisateur 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.

52
j08691

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

edQuantity.validity.valid

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

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

Nous toujours voulons utiliser .validity.valid.

Les autres propriétés ne donnent que des informations supplémentaires:

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 devez 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:

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

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

Cela déclenchera la rougeisation de votre élément chaque fois qu'une valeur valide non numérique est entrée.

Prise en charge 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 sur :invalid ici .

47
Ian Boyd
input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();
11
int32_t

Suivre toutes les touches sur la base de leurs codes

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 fastidieuse et probablement sujette aux 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'>

Tous les crédits à: int32_t

3
sandstrom