Respostas:
Você pode usar .change()
$('input[name=myInput]').change(function() { ... });
No entanto, esse evento será acionado apenas quando o seletor tiver perdido o foco, portanto, você precisará clicar em outro lugar para ter este trabalho.
Se isso não for adequado para você, você poderá usar alguns dos outros eventos do jQuery, como keyup , keydown ou keypress - dependendo do efeito exato que desejar.
change
somente será acionado quando o elemento de entrada perder o foco. Há também o input
evento que é acionado sempre que a caixa de texto é atualizada sem que seja necessário perder o foco. Ao contrário dos principais eventos, ele também funciona para colar / arrastar texto.
change
não é suportado pelo IE9, você pode usar focusout
para ter o mesmo comportamento
Como @pimvdb disse em seu comentário,
Observe que a alteração será acionada apenas quando o elemento de entrada tiver perdido o foco. Há também o evento de entrada que é acionado sempre que a caixa de texto é atualizada sem que seja necessário perder o foco. Ao contrário dos principais eventos, ele também funciona para colar / arrastar texto.
(Veja a documentação .)
Isso é tão útil, vale a pena colocá-lo em uma resposta. Atualmente (v1.8 *?) Não há conveniência .input () fn no jquery, portanto, a maneira de fazê-lo é
$('input.myTextInput').on('input',function(e){
alert('Changed!')
});
$('form').on('change input', function);
fez o truque para mim. Obrigado.
Eu sugeriria usar o evento keyup algo como abaixo:
$('elementName').keyup(function() {
alert("Key up detected");
});
Existem algumas maneiras de obter o mesmo resultado, então acho que é uma preferência e depende de como você deseja que ele funcione exatamente.
Atualização: Isso funciona apenas para entrada manual, não para copiar e colar.
Para copiar e colar, recomendo o seguinte:
$('elementName').on('input',function(e){
// Code here
});
Aqui está o código que eu uso:
$("#tbSearch").on('change keyup paste', function () {
ApplyFilter();
});
function ApplyFilter() {
var searchString = $("#tbSearch").val();
// ... etc...
}
<input type="text" id="tbSearch" name="tbSearch" />
Isso funciona muito bem, principalmente quando combinado com um jqGrid
controle. Você pode digitar em uma caixa de texto e visualizar imediatamente os resultados no seu jqGrid
.
Existe uma e apenas uma maneira confiável de fazer isso , e é puxando o valor em um intervalo e comparando-o com um valor em cache.
A razão pela qual essa é a única maneira é porque existem várias maneiras de alterar um campo de entrada usando várias entradas (teclado, mouse, colar, histórico do navegador, entrada de voz etc.) e você nunca pode detectar todas elas usando eventos padrão em uma cruz ambiente de navegação.
Felizmente, graças à infraestrutura de eventos no jQuery, é muito fácil adicionar seu próprio evento de troca de entrada. Eu fiz isso aqui:
$.event.special.inputchange = {
setup: function() {
var self = this, val;
$.data(this, 'timer', window.setInterval(function() {
val = self.value;
if ( $.data( self, 'cache') != val ) {
$.data( self, 'cache', val );
$( self ).trigger( 'inputchange' );
}
}, 20));
},
teardown: function() {
window.clearInterval( $.data(this, 'timer') );
},
add: function() {
$.data(this, 'cache', this.value);
}
};
Use-o como: $('input').on('inputchange', function() { console.log(this.value) });
Há uma demonstração aqui: http://jsfiddle.net/LGAWY/
Se você tem medo de vários intervalos, pode ligar / desligar este evento em focus
/ blur
.
$('body').on('inputchange', 'input', function() { console.log(this.value) });
:? Ou não, como mencionado aqui: github.com/EightMedia/hammer.js/pull/98 ?
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />
$(".firstName").on('change keyup paste', function () {
var element = $(this);
console.log(element);
var dataAttribute = $(element).attr("data-someattr");
console.log("someattr: " + dataAttribute );
});
Eu recomendo usar a this
palavra-chave para ter acesso a todo o elemento para que você possa fazer tudo o que precisa com esse elemento.
O seguinte funcionará mesmo que seja dinâmico / chamadas Ajax.
Roteiro:
jQuery('body').on('keyup','input.addressCls',function(){
console.log('working');
});
Html,
<input class="addressCls" type="text" name="address" value="" required/>
Espero que este código de trabalho ajude alguém que está tentando acessar dinamicamente / chamadas de Ajax ...
Você poderia simplesmente trabalhar com o id
$("#your_id").on("change",function() {
alert(this.value);
});
Você pode fazer isso de maneiras diferentes, o keyup é um deles. Mas estou dando o exemplo abaixo com a mudança.
$('input[name="vat_id"]').on('change', function() {
if($(this).val().length == 0) {
alert('Input field is empty');
}
});
NB: input [name = "vat_id"] substitua pelo seu ID ou nome de entrada .
Se você deseja acionar o evento enquanto digita , use o seguinte:
$('input[name=myInput]').on('keyup', function() { ... });
Se você deseja acionar o evento ao deixar o campo de entrada , use o seguinte:
$('input[name=myInput]').on('change', function() { ... });
$(document).on('change', 'input[name=myInput]', function() { ... });
$("input").change(function () {
alert("Changed!");
});
Você poderia usar .keypress()
.
Por exemplo, considere o HTML:
<form>
<fieldset>
<input id="target" type="text" value="Hello there" />
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>
O manipulador de eventos pode ser vinculado ao campo de entrada:
$("#target").keypress(function() {
alert("Handler for .keypress() called.");
});
Eu concordo totalmente com Andy; tudo depende de como você deseja que ele funcione.