Detectando alteração de valor da entrada [type = text] no jQuery

159

Quero executar uma função sempre que o valor de uma caixa de entrada específica for alterado. É quase funciona com $('input').keyup(function), mas nada acontece quando colar texto na caixa, por exemplo. $input.change(function)só é acionado quando a entrada está embaçada, então como eu saberia imediatamente sempre que uma caixa de texto alterasse o valor?

Jeriko
fonte
2
Então, por que não vincular os dois keyupe os pasteeventos?
Ilia G
devcurry.com/2009/07/... - Detecção recortar / copiar / colar eventos
BeRecursive
2
@ liho1eye pasteé apenas um que eu pensei, eu prefiro ouvir uma mudança definitiva do que pensar em todos os diferentes caminhos de entrada.
Jeriko
@ Jeriko Essa é a única maneira de alterar o valor (além da atualização óbvia via código js).
Ilia G
Você também deseja capturar Ctlr-X ( cut).
Alexis Wilke

Respostas:

343

apenas lembre-se de que 'on' é recomendado sobre a função 'bind'; portanto, tente sempre usar um ouvinte de eventos como este:

$("#myTextBox").on("change paste keyup", function() {
   alert($(this).val()); 
});
Alejandro Silva
fonte
Por que pasteembora? Primeiro eu pensei que só funcionaria se colarmos algo com CTRL+V.
preto
3
@ NicolasS.Xu: a atribuição direta de valores não aciona nenhum evento DOM #
Alejandro Silva
Seria ainda melhor se usando em console.log()vez de alert. Seria muito chato para keyup alert.
cytsunny
4
@cytsunny sim, claro, o alerta é irritante, mas neste caso é um exemplo do código a ser executado na alteração de valor, realmente pode ser qualquer carga útil que você deseja.
Alejandro Silva
1
Se você clicar e colar com o botão direito, isso retornará o valor da entrada antes da pasta.
alstr
104

Descrição

Você pode fazer isso usando o .bind()método jQuery . Confira o jsFiddle .

Amostra

Html

<input id="myTextBox" type="text"/>

jQuery

$("#myTextBox").bind("change paste keyup", function() {
   alert($(this).val()); 
});

Mais Informações

dknaack
fonte
6

você também pode usar eventos de caixa de texto -

<input id="txt1" type="text" onchange="SetDefault($(this).val());" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

function SetDefault(Text){
  alert(Text);
}

Tente isto

Ishan Jain
fonte
5

Tente o seguinte:

Basicamente, considere apenas cada evento:

Html:

<input id = "textbox" type = "text">

Jquery:

$("#textbox").keyup(function() { 
    alert($(this).val());  
}); 

$("#textbox").change(function() { 
alert($(this).val());  
}); 
H Bellamy
fonte
3
$("#myTextBox").on("change paste keyup select", function() {
     alert($(this).val());
});

selecione para sugestão do navegador

mohamad yazdanpanah
fonte
2

Tente o seguinte:

$("input").bind({
            paste : function(){
                $('#eventresult').text('paste behaviour detected!');
            }
})
Hamed Khosravi
fonte
0

Use isto: https://github.com/gilamran/JQuery-Plugin-AnyChange

Ele lida com todas as maneiras de alterar a entrada, incluindo o menu de conteúdo (Usando o mouse)

gilamran
fonte
Como você usa isso? Eu o incluí no meu HTML e usei $ ("input"). AnyChange (function (e) {console.log (e);}); Mas nunca chegou à linha console.log
Ofer Gal
0

Essa combinação de eventos funcionou para mim:

$("#myTextBox").on("input paste", function() {
   alert($(this).val()); 
});
Nole
fonte
0

NÃO SE ESQUEÇA DO cutou selecteventos!

A resposta aceita é quase perfeita, mas esquece os eventos cute select.

cut é acionado quando o usuário corta o texto (CTRL + X ou com o botão direito do mouse)

select é acionado quando o usuário seleciona uma opção sugerida pelo navegador

Você deve adicioná-los também, como tal:

$("#myTextBox").on("change paste keyup cut select", function() {
   //Do your function 
});
Oscar Chambers
fonte