Como obter o valor bruto de um campo ?

Como posso obter o valor “real” de um campo ?


Eu tenho uma checkbox de input , e estou usando o mais novo number tipo de input HTML5:

  

Isso é suportado principalmente no Chrome 29:

insira a descrição da imagem aqui

O que eu preciso agora é a capacidade de ler o valor “bruto” que o usuário digitou na checkbox de input. Se o usuário tiver inserido um número:

insira a descrição da imagem aqui

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

Mas se o usuário digitar um texto inválido, eu quero colorir a checkbox de input em vermelho:

insira a descrição da imagem aqui

Infelizmente, para uma checkbox de input type="number" , se o valor na checkbox de texto não for um número, o value retornará uma string vazia:

 edQuantity.value = "" (String); 

(no Chrome 29, pelo menos)

Como posso obter o valor “bruto” de um controle ?

Eu tentei procurar na lista de outras propriedades da checkbox de input do Chrome:

insira a descrição da imagem aqui

Eu não vi nada que se assemelhe a input real.

Nem consegui encontrar uma maneira de saber se a checkbox “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 depois da regra horizontal; é só enchimento 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 checkbox vermelha (Um exemplo: convertendo o texto "four" no símbolo latino "4" durante o evento onBlur)

Como posso obter o valor “bruto” de um controle ?

Leitura de bônus

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

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

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

Ao especificar o tipo ( ), você está solicitando ao navegador que faça algum trabalho para você. Se, por outro lado, você quiser capturar a input não numérica e fazer algo com ela, precisará confiar no antigo campo de input de texto testado e comprovado e analisar o conteúdo por conta própria.

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 para uma cadeia 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 ValidityState de um object fornece pistas sobre o que o usuário digitou. Considere uma input type="number" com um conjunto min e max

  

Nós sempre queremos usar .validity.valid .

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

 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 

Você precisará garantir que o navegador suporte a validação de HTML5 antes de usá-lo:

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

Bônus

Spudly tem uma resposta útil que ele excluiu:

Basta usar o seletor CSS :invalid para isso.

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

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

O suporte do navegador para é praticamente o mesmo que :invalid , então não há problema.

Leia mais sobre :invalid aqui .

Nota : Qualquer código é liberado para o domínio público. Nenhuma atribuição é necessária.

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

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

Suponho que se poderia ouvir os events de chave e manter uma matriz de todos os caracteres inseridos, com base em seus códigos de teclas. Mas é uma tarefa muito tediosa e provavelmente propensa a erros.

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

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

 document.querySelector('input').addEventListener('input', onInput); function onInput(){ this.select(); console.log( window.getSelection().toString() ) }