Come posso ottenere il valore "reale" di un <input type="number">campo?

Ho una inputscatola e sto usando il tipo di input HTML5 più recente number:

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

Questo è principalmente supportato in Chrome 29:

Ciò di cui ho bisogno ora è la capacità di leggere il valore "grezzo" che l'utente ha inserito nella casella di input. Se l'utente ha inserito un numero:

allora edQuantity.value = 4, e tutto va bene.

Ma se l'utente inserisce un testo non valido, voglio colorare di rosso la casella di input:

Sfortunatamente, per una type="number"casella di input, se il valore nella casella di testo non è un numero, valuerestituisce una stringa vuota:

edQuantity.value = "" (String);

(almeno in Chrome 29)

Come posso ottenere il valore "grezzo" di un <input type="number">controllo?

ho provato a guardare l'elenco di Chrome di altre proprietà della casella di input:

non ho visto nulla che assomiglia all'ingresso effettivo.

Né sono riuscito a trovare un modo per sapere se la casella "è vuota" o meno. Forse avrei potuto dedurre:

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

Nota : puoi ignorare tutto ciò che segue la riga orizzontale; è solo un riempitivo per giustificare la domanda. Inoltre: non confondere l'esempio con la domanda. Le persone potrebbero volere la risposta a questa domanda per motivi diversi dalla colorazione del riquadro in rosso (Un esempio: convertire il testo "four"nel "4"simbolo latino durante l'evento onBlur)

Come posso ottenere il valore "grezzo" di un <input type="number">controllo?

Lettura bonus

• jsFiddle di tutto quanto sopra (aggiornato)
• Voce Quirkmode.org per i nuovi tipi di input

Secondo WHATWG , non dovresti essere in grado di ottenere il valore a meno che non sia un input numerico valido. L'algoritmo di sanificazione del campo del numero di input dice che il browser dovrebbe impostare il valore su una stringa vuota se l'input non è un numero in virgola mobile valido.

L' algoritmo di sanificazione del valore è il seguente: Se il valore dell'elemento non è un numero in virgola mobile valido , impostalo invece sulla stringa vuota.

Specificando il tipo ( <input type="number">) chiedi al browser di eseguire un lavoro per te. Se, d'altra parte, desideri essere in grado di catturare l'input non numerico e fare qualcosa con esso, dovresti fare affidamento sul vecchio campo di input di testo provato e vero e analizzare il contenuto da solo.

Anche il W3 ha le stesse specifiche e aggiunge:

I programmi utente non devono consentire all'utente di impostare il valore su una stringa non vuota che non è un numero a virgola mobile valido.

Non risponde alla domanda, ma la soluzione utile è controllare

edQuantity.validity.valid

Il ValidityStatesimbolo di un oggetto fornisce indizi su ciò che l'utente ha inserito. Considera un type="number"input con un set minemax

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

Vogliamo sempre usare .validity.valid.

Altre proprietà forniscono solo informazioni sui 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

Dovrai assicurarti che il browser supporti la convalida HTML5 prima di utilizzarlo:

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;
}

indennità

Spudly ha una risposta utile che ha cancellato:

Usa semplicemente il :invalidselettore CSS per questo.

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

Questo farà sì che il tuo elemento diventi rosso ogni volta che viene inserito un valore non numerico valido.

Il supporto del browser per <input type='number'>è più o meno lo stesso di :invalid, quindi nessun problema.

Maggiori informazioni :invalid qui .

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

Tieni traccia di tutti i tasti premuti in base ai loro codici chiave

Suppongo che si possa ascoltare gli eventi keyup e mantenere un array di tutti i caratteri inseriti, in base ai loro keycode. Ma è un compito piuttosto noioso e probabilmente soggetto a bug.

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

Seleziona l'input e ottieni la selezione come stringa

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

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

<input type='number'>

Tutto il merito a: int32_t