risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come ottenere il valore grezzo in un campo <input type = "number">?

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


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

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

Questo è principalmente supportato in Chrome 29:

enter image description here

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:

enter image description here

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

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

enter image description here

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

edQuantity.value = "" (String);

(in Chrome 29 almeno)

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

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

enter image description here

non ho visto nulla che assomigli all'input reale.

Né potrei trovare un modo per dire se la casella "è vuota", oppure no. 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 dopo la regola orizzontale; è solo riempitivo per giustificare la domanda. Inoltre: non confondere l'esempio con la domanda. Le persone potrebbero desiderare la risposta a questa domanda per motivi altro che colorare la casella in rosso (Un esempio: convertire il testo "four" in latino "4" simbolo durante l'evento onBlur)

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

Lettura bonus

110
Ian Boyd

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

algoritmo di sanitizzazione del valore è il seguente: Se valore dell'elemento non è un numero a virgola mobile valido , impostarlo su vuoto stringa invece.

Specificando il tipo (<input type="number">) stai chiedendo al browser di fare un po 'di 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 immissione del testo provato e vero e analizzare tu stesso il contenuto.

W ha anche 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.

52
j08691

Non risponde alla domanda, ma la soluzione utile è controllare

edQuantity.validity.valid

ValidityState di un oggetto fornisce indizi su ciò che l'utente ha inserito. Considera un type="number" input con un set min e max

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

Noi vogliamo sempre usare .validity.valid.

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

Devi assicurarti che il browser supporti la convalida HTML5 prima di usarlo:

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

Usa il CSS :invalid selettore per questo.

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

Ciò farà in modo che il tuo elemento diventi rosso ogni volta che viene inserito un valore non numerico.

Supporto browser per <input type='number'> è quasi uguale a :invalid, quindi nessun problema lì.

lteriori informazioni su :invalid qui .

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

Traccia tutti i tasti premuti in base ai loro codici chiave

Suppongo che uno potrebbe ascoltare gli eventi di keyup e mantenere un array di tutti i caratteri inseriti, in base ai loro codici chiave. 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 credito a: int32_t

3
sandstrom