Como posso obter jquery .val () APÓS o evento de pressionamento de tecla?


101

Eu tenho:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Agora o alerta sempre retorna o valor ANTES do pressionamento de tecla (por exemplo, o campo está vazio, eu digito 'a' e o alerta me dá ''. Então eu digito 'b' e o alerta me dá 'a' ...). Mas eu quero o valor APÓS o pressionamento da tecla - como posso fazer isso?

Plano de fundo: gostaria de habilitar um botão assim que o campo de texto contiver pelo menos um caractere. Então, eu executo esse teste em cada evento de pressionamento de tecla, mas usando o val () retornado, o resultado está sempre um passo atrás. Usar o evento change () não é uma opção para mim porque o botão fica desabilitado até você sair da caixa de texto. Se houver uma maneira melhor de fazer isso, fico feliz em saber!


O botão deve ser desativado novamente se o texto for excluído? Nesse caso, você provavelmente terá que manter a tecla pressionada.
Brilliand

Respostas:


152

Mudar keypresspara keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressé disparado quando a tecla é pressionada, keyupé disparado quando a tecla é liberada.


@Brilliand Você está certo. Eu fiz uma solução alternativa para isso, está postado abaixo.
David Oliveros

7
como quem você consegue fazer isso em dispositivos iPhone / Android? Eles não suportam a função keyup.
Merijn Den Houting

4
definição de keypress não é exatamente correta. essa é a definição de keydown. consulte quirksmode.org/dom/events/keys.html
Challet de

59

Surpreso que ninguém mencionou o evento js "input":

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Recomendado.

https://developer.mozilla.org/en-US/docs/Web/Events/input


8
Uau, esta é a resposta para várias perguntas de OS sem respostas / mal respondidas.
Ben Racicot

4
Isso também é ótimo quando você precisa ignorar o pressionamento das teclas de seta, shift etc. no campo de entrada.
hovado

2
caniuse.com/#search=input Suporte de navegador relativamente bom. Uma resposta muito melhor do que ouvir todas as teclas.
James Haug

1
Isso salva meu dia! Obrigado. Usei o seguinte código: $ ('. Subject_mark'). On ("input", function () {var $ th = $ (this); $ th.val ($ th.val (). Replace (/ [^ 0-9] / g, function (str) {return '';}));
arsho


5

Como alternativa, você pode usar o evento keydown com um tempo limite de 0.

Dessa forma, as alterações serão aplicadas instantaneamente, em vez de serem aplicadas quando o usuário parar de segurar a tecla.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});

Isso ainda se comportará estranhamente no caso de manter pressionada a tecla Backspace ... talvez pressionar a tecla com um tempo limite de 0?
Brilliand

Ah, não importa, o OP não especifica o que deve acontecer se o campo de texto for limpo.
Brilliand

4

Você pode querer conectar um onchange manipulador de eventos em vez de usar qualquer um dos eventos-chave.

$(someTextInputField).change(function() {
    alert($(this).val());
});

Usar Edit > Pasteou um clique com o botão direito e depois colar irá disparar um evento de mudança, mas não um evento chave. Observe que alguns navegadores podem simular um evento importante em uma pasta (embora eu não saiba de nenhum), mas você não pode contar com esse comportamento.


4

Experimente algo assim:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

Isso simplesmente introduz um tempo limite para que, depois que o loop de evento "pressionamento de tecla" for concluído, seu código seja executado quase imediatamente depois disso. Um intervalo tão curto do cronômetro (mesmo se arredondado pelo navegador) não será perceptível.

editar - ou você pode usar "keyup" como todo mundo diz, embora sua semântica seja diferente.


Não é uma questão de ser inteligente . O evento keyup não fornece o mesmo resultado. Você obtém eventos distintos para shift, ctrl, etc. com keyup - se você deseja obter o caractere real que está sendo digitado (como um E comercial) em vez de uma série de eventos de tecla que você deve verificar o estado das teclas shift ou ctrl, pressionamento de tecla é o caminho a percorrer.
Ripside

1
Certo; isso é o que eu quis dizer com "sua semântica é diferente".
Pointy
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.