<select>
memiliki API ini. Apa tentang <input>
?
Seperti @pimvdb mengatakan dalam komentarnya,
Perhatikan bahwa perubahan hanya akan diaktifkan ketika elemen input telah kehilangan fokus. Ada juga acara input yang kebakaran setiap kali textbox update tanpa perlu kehilangan fokus. Tidak seperti peristiwa penting ini juga bekerja untuk paste/menyeret teks.
(Lihat dokumentasi.)
Ini sangat berguna, itu adalah layak menempatkan hal itu dalam sebuah jawaban. Saat ini (v1.8*?) tidak ada .input() yang berkualitas fn di jquery, jadi cara untuk melakukan hal ini
$('input.myTextInput').on('input',function(e){
alert('Changed!')
});
Anda dapat menggunakan .perubahan()
$('input[name=myInput]').change(function() { ... });
Namun, acara ini hanya akan diaktifkan ketika pemilih telah kehilangan fokus, sehingga anda akan perlu untuk klik di tempat lain untuk memiliki pekerjaan ini.
Jika itu's tidak cukup tepat untuk anda, anda bisa menggunakan beberapa lainnya jQuery events seperti keyup, keydown atau menekan tombol - tergantung pada efek yang tepat yang anda inginkan.
Saya akan menyarankan menggunakan keyup event sesuatu seperti di bawah ini:
$('elementName').keyup(function() {
alert("Key up detected");
});
Ada beberapa cara untuk mencapai hasil yang sama jadi saya kira itu's turun ke preferensi dan tergantung pada bagaimana anda ingin bekerja dengan tepat.
Update: Ini hanya bekerja untuk input manual tidak copy dan paste.
Untuk copy paste dan saya akan merekomendasikan hal berikut:
$('elementName').on('input',function(e){
// Code here
});
Berikut ini's kode yang saya gunakan:
$("#tbSearch").on('change keyup paste', function () {
ApplyFilter();
});
function ApplyFilter() {
var searchString = $("#tbSearch").val();
// ... etc...
}
<input type="text" id="tbSearch" name="tbSearch" />
Ini bekerja cukup baik, terutama ketika dipasangkan dengan jqGrid
kontrol. Anda hanya bisa mengetik ke dalam textbox dan segera lihat hasil di jqGrid
.
Ada satu dan hanya satu cara yang dapat diandalkan untuk melakukan hal ini, dan itu adalah dengan menarik nilai dalam sebuah interval dan membandingkannya dengan nilai yang di-cache.
Alasan mengapa ini adalah satu-satunya cara adalah karena ada beberapa cara untuk mengubah sebuah field input menggunakan berbagai input (keyboard, mouse, paste, browser history, voiceinput dll.) dan anda tidak pernah dapat mendeteksi semua dari mereka menggunakan standar acara di cross-browser lingkungan.
Untungnya, berkat acara infrastruktur di jQuery, itu cukup mudah untuk menambahkan anda sendiri inputchange acara. Aku melakukannya di sini:
$.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);
}
};
Menggunakannya seperti: $('input').pada('inputchange', function() { console.log(ini.nilai) });
Ada demo di sini:
Jika anda takut dari beberapa interval, anda dapat mengikat/melepaskan acara ini di fokus
/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 );
});
Saya sarankan menggunakan ini
kata kunci dalam rangka untuk mendapatkan akses ke seluruh elemen sehingga anda dapat melakukan segala sesuatu yang anda butuhkan dengan elemen ini.
Berikut ini akan bekerja bahkan jika itu adalah dinamis/panggilan Ajax.
Script:
jQuery('body').on('keyup','input.addressCls',function(){
console.log('working');
});
Html,
<input class="addressCls" type="text" name="address" value="" required/>
Saya berharap ini bekerja code akan membantu seseorang yang mencoba untuk mengakses secara dinamis/panggilan Ajax...
Anda hanya bisa bekerja dengan id
$("#your_id").on("change",function() {
alert(this.value);
});
Anda bisa menggunakan .menekan tombol()
.
Sebagai contoh, perhatikan kode HTML:
<form>
<fieldset>
<input id="target" type="text" value="Hello there" />
</fieldset>
</form>
<div id="other">
Trigger the handler
</div>
Event handler dapat terikat ke input field:
$("#target").keypress(function() {
alert("Handler for .keypress() called.");
});
Saya setuju dengan Andy; semua tergantung pada bagaimana anda ingin bekerja.
Anda dapat melakukan ini dengan cara yang berbeda, keyup adalah salah satu dari mereka. Tapi saya memberikan contoh di bawah ini dengan perubahan.
$('input[name="vat_id"]').on('change', function() {
if($(this).val().length == 0) {
alert('Input field is empty');
}
});
NB: input[name="vat_id"] ganti dengan masukan anda ID atau ****nama.