Como posso obter o valor "real" de um <input type="number">campo?

Eu tenho uma inputcaixa e estou usando o tipo de entrada HTML5 mais recente number:

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

Isso é principalmente compatível com o Chrome 29:

O que eu preciso agora é a capacidade de ler o valor "bruto" que o usuário inseriu na caixa de entrada. Se o usuário inseriu um número:

então edQuantity.value = 4, e tudo está bem.

Mas se o usuário inserir um texto inválido, quero colorir a caixa de entrada de vermelho:

Infelizmente, para uma type="number"caixa de entrada, se o valor na caixa de texto não for um número, valueretorna uma string vazia:

edQuantity.value = "" (String);

(no Chrome 29, pelo menos)

Como posso obter o valor "bruto" de um <input type="number">controle?

Tentei olhar a lista do Chrome de outras propriedades da caixa de entrada:

não vi nada que se pareça com a entrada real.

Nem consegui encontrar uma maneira de saber se a caixa "está vazia" ou não. Talvez eu pudesse ter inferido:

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

Nota : Você pode ignorar tudo após a régua horizontal; é apenas um preenchimento para justificar a pergunta. Além disso: não confunda o exemplo com a pergunta. As pessoas podem querer a resposta a esta pergunta por outras razões além de colorir a caixa de vermelho (um exemplo: converter o texto "four"no "4"símbolo latino durante o evento onBlur)

Como posso obter o valor "bruto" de um <input type="number">controle?

Leitura de bônus

• jsFiddle de todos os itens acima (atualizado)
• Entrada Quirkmode.org para os novos tipos de entrada

De acordo com o WHATWG , você não deve ser capaz de obter o valor a menos que seja uma entrada numérica válida. O algoritmo de sanitização do campo de número de entrada diz que o navegador deve definir o valor como uma string vazia se a entrada não for um número de ponto flutuante válido.

O algoritmo de sanitização de valor é o seguinte: Se o valor do elemento não for um número de ponto flutuante válido , defina-o como uma string vazia.

Ao especificar o type ( <input type="number">), você está pedindo ao navegador para fazer algum trabalho para você. Se, por outro lado, você gostaria de ser capaz de capturar a entrada não numérica e fazer algo com ela, você teria que contar com o antigo campo de entrada de texto testado e comprovado e analisar o conteúdo você mesmo.

O W3 também tem as mesmas especificações e adiciona:

Os agentes do usuário não devem permitir que o usuário defina o valor como uma string não vazia que não seja um número de ponto flutuante válido.

Não responde à pergunta, mas a solução útil é verificar

edQuantity.validity.valid

O ValidityStatede um objeto fornece pistas sobre o que o usuário inseriu. Considere uma type="number"entrada com um mine maxconjunto

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

Nós sempre quer usar .validity.valid.

Outras propriedades fornecem apenas informações de bônus:

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

Você terá que se certificar de que o navegador suporta validação HTML5 antes de usá-lo:

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

Bônus

Spudly tem uma resposta útil que excluiu:

Basta usar o :invalidseletor CSS para isso.

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

Isso fará com que seu elemento fique vermelho sempre que um valor não numérico válido for inserido.

O suporte do navegador para <input type='number'>é quase o mesmo que :invalid, então não há problema.

Leia mais sobre :invalid aqui .

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

Rastreie todas as teclas pressionadas com base em seus códigos de tecla

Suponho que se possa ouvir os eventos de ativação e manter uma matriz de todos os caracteres inseridos, com base em seus códigos de tecla. Mas é uma tarefa muito tediosa e provavelmente sujeita a bugs.

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

Selecione a entrada e obtenha a seleção como uma string

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

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

<input type='number'>

Todo o crédito para: int32_t