¿Cómo puedo obtener el valor "real" de un <input type="number">campo?

Tengo una inputcaja y estoy usando un tipo de entrada HTML5 más nuevo number:

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

Esto es principalmente compatible con Chrome 29:

Lo que ahora necesito es la capacidad de leer el valor "sin procesar" que el usuario ingresó en el cuadro de entrada. Si el usuario ha introducido un número:

entonces edQuantity.value = 4, y todo va bien.

Pero si el usuario ingresa texto no válido, quiero colorear el cuadro de entrada de rojo:

Desafortunadamente, para un type="number"cuadro de entrada, si el valor en el cuadro de texto no es un número, entonces valuedevuelve una cadena vacía:

edQuantity.value = "" (String);

(en Chrome 29 al menos)

¿Cómo puedo obtener el valor "bruto" de un <input type="number">control?

Intenté buscar en la lista de Chrome de otras propiedades del cuadro de entrada:

No vi nada que se parezca a la entrada real.

Tampoco pude encontrar una manera de saber si la casilla "está vacía" o no. Tal vez podría haber inferido:

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

Nota : puede ignorar todo después de la regla horizontal; es solo un relleno para justificar la pregunta. Además: no confunda el ejemplo con la pregunta. La gente puede querer la respuesta a esta pregunta por otras razones además de colorear el cuadro de rojo (Un ejemplo: convertir el texto "four"en el "4"símbolo latino durante el evento onBlur)

¿Cómo puedo obtener el valor "bruto" de un <input type="number">control?

Lectura adicional

• jsFiddle de todo lo anterior (actualizado)
• Entrada de Quirkmode.org para los nuevos tipos de entrada

De acuerdo con WHATWG , no debería poder obtener el valor a menos que sea una entrada numérica válida. El algoritmo de desinfección del campo del número de entrada dice que se supone que el navegador debe establecer el valor en una cadena vacía si la entrada no es un número de punto flotante válido.

El algoritmo de desinfección de valores es el siguiente: si el valor del elemento no es un número de punto flotante válido, establézcalo en la cadena vacía.

Al especificar el tipo ( <input type="number">) le está pidiendo al navegador que haga un trabajo por usted. Si, por otro lado, desea poder capturar la entrada no numérica y hacer algo con ella, tendrá que confiar en el antiguo campo de entrada de texto probado y verdadero y analizar el contenido usted mismo.

El W3 también tiene las mismas especificaciones y agrega:

Los agentes de usuario no deben permitir que el usuario establezca el valor en una cadena no vacía que no sea un número de punto flotante válido.

No responde a la pregunta, pero la solución útil es verificar

edQuantity.validity.valid

La ValidityStatede un objeto da pistas sobre lo que ingresó el usuario. Considere una type="number"entrada con a miny maxestablezca

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

Nosotros siempre queremos utilizar .validity.valid.

Otras propiedades solo brindan información adicional:

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

Tendrá que asegurarse de que el navegador admita la validación HTML5 antes de 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;
}

Prima

Spudly tiene una respuesta útil que eliminó:

Solo usa el :invalidselector de CSS para esto.

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

Esto activará su elemento para que se vuelva rojo cada vez que se ingrese un valor válido no numérico.

La compatibilidad del navegador con <input type='number'>es aproximadamente la misma que :invalid, así que no hay problema.

Leer más sobre :invalid aquí .

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

Seguimiento de todas las teclas presionadas según sus códigos de tecla

Supongo que uno podría escuchar los eventos de activación de teclas y mantener una matriz de todos los caracteres ingresados, según sus códigos de teclas. Pero es una tarea bastante tediosa y probablemente propensa a errores.

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

Seleccione la entrada y obtenga la selección como una cadena

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

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

<input type='number'>

Todo crédito a: int32_t