vacios - validar input javascript

¿Cómo obtener el valor bruto como un campo<input type="number">?

Question

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

Tengo un cuadro de input , y estoy usando el number tipo de entrada HTML5 más nuevo:

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

Esto es principalmente compatible con Chrome 29:

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

luego edQuantity.value = 4 , y todo está bien.

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

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

edQuantity.value = "" (String);

(en Chrome 29 al menos)

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

Traté de mirar a través de la lista de Chrome de otras propiedades del cuadro de entrada:

No vi nada que se parezca a la entrada real.

Tampoco podría 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 relleno para justificar la pregunta. Además: no confundas el ejemplo con la pregunta. La gente puede querer la respuesta a esta pregunta por razones distintas a colorear el cuadro rojo (Un ejemplo: convertir el texto "four" en el símbolo latino "4" durante el evento onBlur)

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

Lectura de bonificación

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

Answer 1

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 de número de entrada indica que se supone que el navegador establece el valor en una cadena vacía si la entrada no es un número de punto flotante válido.

El algoritmo de sanitización de valor es el siguiente: si el value del elemento no es un número válido de coma flotante , configúrelo en la cadena vacía.

Al especificar el tipo ( <input type="number"> ) le está pidiendo al navegador que trabaje para usted. Si, por otro lado, le gustaría poder capturar la entrada no numérica y hacer algo con ella, tendrá que confiar en el viejo 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 válido de coma flotante.

Answer 2

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

edQuantity.validity.valid

El ValidityState de un objeto da pistas sobre lo que el usuario ingresó. Considere una entrada type="number" con un conjunto min y max

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

Siempre queremos usar .validity.valid .

Otras propiedades solo dan información adicional:

Users 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

Deberá asegurarse de que el navegador admita la validación de HTML5 antes de usarlo:

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

Prima

Spudly tiene una respuesta útil que eliminó:

Simplemente use el CSS :invalid selector :invalid para esto.

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

Esto disparará su elemento a rojo cuando se ingrese una validez no numérica.

El soporte del navegador para <input type=''number''> es casi lo mismo que :invalid , entonces no hay problema.

Leer más sobre :invalid aquí .

Nota : Cualquier código se libera en el dominio público. No se requiere atribución.

Answer 3

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

Supongo que uno podría escuchar los eventos de teclado y mantener una matriz de todos los caracteres ingresados, en función de sus códigos de tecla. 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 el crédito a: int32_t

Answer 4

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