Como posso implementar onchange de com jQuery?
Pergunta
<select>
tem essa API. E sobre <input>
?
Solução
Você pode usar .change()
$('input[name=myInput]').change(function() { ... });
No entanto, este evento só será acionado quando o selector perdeu o foco, assim você terá que clicar em algum outro lugar para ter este trabalho.
Se isso não é certo para você, você poderia usar algumas das outras jQuery eventos como keyup , keydown ou keypress -. dependendo do efeito exato que você deseja
Outras dicas
Como @pimvdb disse em seu comentário,
Note que a mudança só será acionado quando o elemento de entrada tem o foco perdido. Há também o evento de entrada que é acionado sempre que as atualizações da caixa de texto sem ela a necessidade de perder o foco. Ao contrário de eventos-chave que também trabalha para colar / arrastando texto.
(Veja documentação .)
Este é tão útil, vale a pena colocá-lo em uma resposta. Atualmente (v1.8 *?) Não há .input () fn conveniência em jQuery, assim que a maneira de fazer isso é
$('input.myTextInput').on('input',function(e){
alert('Changed!')
});
Eu sugeriria usando o evento keyup algo como abaixo:
$('elementName').keyup(function() {
alert("Key up detected");
});
Existem algumas maneiras de alcançar o mesmo resultado, então eu acho que é uma questão de preferência e depende de como você quer que ele funcione exatamente.
Update:. Isso só funciona para a entrada manual não copiar e colar
Para copiar e colar Eu recomendaria o seguinte:
$('elementName').on('input',function(e){
// Code here
});
Aqui está o uso de código I:
$("#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, especialmente quando emparelhado com um controle jqGrid
. Você pode simplesmente digitar em uma caixa de texto e imediatamente ver os resultados em sua jqGrid
.
Existe uma e apenas uma maneira confiável para fazer isso , e é puxando o valor em um intervalo e comparando-a com um valor em cache.
A razão para isso é a única maneira é porque há várias maneiras de mudar um campo de entrada usando várias entradas (teclado, mouse, pasta, histórico do navegador, voiceinput etc.) e você nunca pode detectar todos eles usando eventos padrão em um ambiente cross-browser.
Felizmente, graças à infra-estrutura de evento em jQuery, é bastante fácil de adicionar seu próprio evento inputchange. 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) });
Existe uma demo aqui: http://jsfiddle.net/LGAWY/
Se você está com medo de vários intervalos, você pode vincular / desvincular este evento em focus
/ blur
.
<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 palavra-chave uso this
a fim de obter acesso a todo o elemento para que o seu é capaz fazer tudo que você precisa com este elemento.
$("input").keyup(function () {
alert("Changed!");
});
A seguir irá funcionar mesmo que seja / chamadas Ajax dinâmicas.
Script:
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 vai ajudar alguém que está tentando acessar dinamicamente / Ajax chama ...
Você poderia simplesmente trabalhar com o id
$("#your_id").on("change",function() {
alert(this.value);
});
$("input").change(function () {
alert("Changed!");
});
Isso funcionou para mim. Se o campo com o nome fieldA é clicado ou qualquer tecla entrou ele atualiza campo com id fieldB .
jQuery("input[name='fieldA']").on("input", function() {
jQuery('#fieldB').val(jQuery(this).val());
});
Você pode usar .keypress()
.
Por exemplo, considere o código 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ê quer que ele funcione.
Você pode fazer isso de diferentes maneiras, keyup é um deles. Mas eu estou dando exemplo a seguir, 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"] substituir com sua entrada ID ou nome