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:
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:
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:
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:
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 ?
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; }
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() ) }