Detectando "valor" do campo de texto de entrada após um evento keydown no campo de texto?

votos
16

Então, meu site tem uma caixa de entrada, que tem um evento onkeydown que simplesmente alerta o valor da caixa de entrada.

Infelizmente, o valor da entrada não inclui as mudanças devido à tecla sendo pressionada.

Por exemplo, para esta caixa de entrada:

<input onkeydown=alert(this.value) type=text value=cow />

O valor padrão é vaca. Quando você pressiona o S chave na entrada, você recebe um alerta ( vaca) em vez de um alerta ( vacas). Como posso fazer isso alert ( vacas) sem usar onkeyup ? Eu não quero usar onkeyup porque se sente menos sensível.

Uma solução parcial é detectar a tecla pressionada e, em seguida, anexá-lo ao valor da entrada, mas isso não funciona em todos os casos, como se você tem o texto na entrada destacada e, em seguida, você pressionar uma tecla.

Alguém tem uma solução completa para este problema?

obrigado

Publicado 27/08/2009 em 02:55
fonte usuário
Em outras línguas...                            


7 respostas

votos
16

O manipulador de eventos só vê o conteúdo antes de a alteração é aplicada, porque o mousedowne inputeventos lhe dar uma chance para bloquear o evento antes que ele chegue ao campo.

Você pode contornar essa limitação, dando o navegador uma chance para atualizar o conteúdo do campo antes de pegar o seu valor - a maneira mais simples é usar um pequeno tempo de espera antes de verificar o valor.

Um exemplo é o mínimo:

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

Isso define um tempo limite 1ms que deve acontecer após o pressionamento de tecla e manipuladores keydown ter deixado o controle alterar seu valor. Se seu monitor é refrescante a 60fps então você tem 16ms de espaço de manobra antes de ele fica 2 quadros.


Um exemplo mais completo (que não depende de acesso chamado no objeto Janela seria algo como:

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

Quando você executa o trecho acima, tente alguns dos seguintes:

  • Coloque o cursor no início e tipo
  • Colar algum conteúdo no meio da caixa de texto
  • Escolha um monte de texto e digitar para substituí-lo
Respondeu 27/08/2009 em 03:04
fonte usuário

votos
3

Note-se que nos navegadores mais recentes que você vai ser capaz de usar o novo evento "input" HTML5 ( https://developer.mozilla.org/en-US/docs/DOM/window.oninput ) para isso. A maioria dos navegadores não-IE têm apoiado este evento por um longo tempo (veja a tabela de compatibilidade no link); para o IE é versão> / 9 apenas infelizmente.

Respondeu 24/03/2013 em 22:46
fonte usuário

votos
0

Jquery é a melhor maneira de fazer isso. Por favor, refira o seguinte abaixo:

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});
Respondeu 04/01/2018 em 23:02
fonte usuário

votos
0

Por favor, tente usar oninput evento. Ao contrário onkeydown , OnKeyPress eventos deste controle atualizações do evento propriedade de valor.

<input id="txt1" value="cow" oninput="alert(this.value);" />
Respondeu 11/08/2017 em 14:25
fonte usuário

votos
0

Aqui você tem exemplo com a explicação: http://jsbin.com/awopus/4/edit

Respondeu 06/03/2013 em 19:27
fonte usuário

votos
0

Ao meu conhecimento que você não pode fazer isso com um controle de entrada padrão a menos que você rolar o seu próprio.

Respondeu 27/08/2009 em 03:06
fonte usuário

votos
0

KeyUp / baixo eventos são tratados de forma diferente em diferentes navegadores. A solução mais simples é usar uma biblioteca como mootools, o que fará com que eles se comportam da mesma, lidar com propagação e borbulhante, e dar-lhe um padrão "isto" no retorno de chamada.

Respondeu 27/08/2009 em 02:58
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more