jQuery obtém valor de entrada após pressionar a tecla


129

Eu tenho a seguinte função:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Por alguma razão, pela primeira vez que pressiono uma tecla, estou recebendo uma string vazia no log do console.

Respostas:


157

Isso ocorre porque os keypresseventos são disparados antes que o novo caractere seja adicionado ao valueelemento (portanto, o primeiro keypressevento é disparado antes que o primeiro caractere seja adicionado, enquanto ele valueainda está vazio). Você deve usar em keyupvez disso, que é disparado após o personagem ter sido adicionado.

Observe que, se seu elemento #dSuggestfor o mesmo, input:text[name=dSuggest]você poderá simplificar consideravelmente esse código (e se não for, ter um elemento com um nome igual ao idde outro elemento não é uma boa ideia).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

2
Funciona, mas com o jquery 2.x desativado, isso está desatualizado agora, pois a resposta abaixo, usando a entrada e a entrada, é a melhor maneira de fazê-lo agora.
Piotr Kula

1
@ppumkin: Só porque o jQuery 2 está fora, não significa que as pessoas não precisam dar suporte ao IE8 e inferior. E não vejo nada nos documentos que sugira suporte real para o inputtipo de evento.
monstro de biscoito

7
Você corrige, eles devem parar de apoiar o IE, ponto. A maioria das "soluções alternativas" no jQuery 1.x é para o IE, portanto, ele realmente deve ser renomeado para jQuerIE.
Piotr Kula

189

Percebendo que este é um post bastante antigo, fornecerei uma resposta de qualquer maneira, pois estava lutando com o mesmo problema.

Você deve usar o "input"evento e se registrar com o .onmétodo Isso é rápido - sem o atraso keyupe resolve o último problema de pressionamento de tecla que você descreve.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Demonstração aqui


26
Isso deve ser marcado como uma resposta adequada - talvez o keyup resolva o problema de caractere ausente, mas é problemático determinar se o caractere foi realmente escrito (e a chave não era, por exemplo, "tab" ou "home"). +1 para você
Nashi 28/03

O problema é que ele não é suportado em navegadores antigos e o IE9 não responde a caracteres excluídos.
PhoneixS

33

Use em .keyupvez de pressionar a tecla.

Use também $(this).val()ou apenas this.valuepara acessar o valor de entrada atual.

DEMO aqui

Informações sobre os .keypressdocumentos do jQuery,

O evento de pressionamento de tecla é enviado a um elemento quando o navegador registra a entrada do teclado. Isso é semelhante ao evento keydown, exceto no caso de repetições de teclas. Se o usuário pressionar e segurar uma tecla, um evento de pressionamento de tecla será acionado uma vez, mas eventos de pressionamento de tecla separados serão acionados para cada caractere inserido. Além disso, as teclas modificadoras (como Shift) acionam eventos de pressionamento de tecla, mas não os eventos de pressionamento de tecla.


5
keyupé muito lento e uma tecla pode ser pressionada e mantida sem ser liberada e as coisas precisam acontecer. melhor usar keydowncom um pouco de tempo limite para que o valor realmente mude.
vsync

a única desvantagem que encontrei é que, se o usuário pressionar mais de um caractere do teclado, ele não será registrado corretamente.
vsync

5

Você precisa interromper o encadeamento de execução para permitir que a entrada seja atualizada.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

1
keyupo atraso é muito lento para alguns propósitos e também não filtra automaticamente as teclas modificadoras. Isso realmente funciona melhor para mim.
Albert Bori

melhor resposta. keyup - lento e não pode pegar caracteres como @ com duas teclas pressionadas.
Roma Rush

4

Isso ocorre porque o Keypressevento é disparado antes que o novo caractere seja adicionado. Use o evento 'keyup', que funcionará perfeitamente na sua situação.

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Quero acrescentar a isso, se você tem muitas caixas de texto e precisa fazer a mesma coisa no evento keyup, basta dar a elas uma classe css comum (por exemplo, commoncss) e aplicar o evento keyup dessa maneira.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

isso reduzirá bastante o seu código, pois você não precisará aplicar o evento keyup por id para cada caixa de texto.


3

Eu estava procurando por um exemplo de ES6 (para que ele pudesse passar pelo meu ponteiro). Portanto, para outras pessoas que estão procurando o mesmo:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

Eu também usaria keyup porque você obtém o valor atual que é preenchido.


1

Basta usar um tempo limite para fazer sua ligação; o tempo limite será chamado quando a pilha de eventos for concluída (ou seja, após a chamada do evento padrão)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

0

Eu acho que o que você precisa é o protótipo abaixo

$(element).on('input',function(){code})

0

jQuery obtém valor de entrada após pressionar a tecla

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 
<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>  

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.