Bagaimana cara menerapkan pertukaran <input type = "text"> dengan jQuery?


Jawaban:


219

Kamu bisa memakai .change()

$('input[name=myInput]').change(function() { ... });

Namun, acara ini hanya akan menyala ketika pemilih kehilangan fokus, jadi Anda harus mengklik di tempat lain untuk memiliki pekerjaan ini.

Jika itu tidak tepat untuk Anda, Anda bisa menggunakan beberapa acara jQuery lainnya seperti keyup , keydown atau penekanan tombol - tergantung pada efek yang Anda inginkan.


Sayangnya, ini tidak berfungsi untuk input tersembunyi. Sebuah solusi yang mungkin ketika diperlukan pertukaran pada input tersembunyi adalah: <input type = 'text' style = 'display: none' /> (dengan css) ..
NickGreen

303
Perhatikan bahwa changehanya akan menyala ketika elemen input kehilangan fokus. Ada juga inputacara yang menyala setiap kali kotak teks diperbarui tanpa perlu kehilangan fokus. Tidak seperti acara utama, ini juga berfungsi untuk menempel / menyeret teks.
pimvdb

4
Komentar luar biasa @pimvdb. Saya menggunakan ini, dan mengubahnya menjadi jawaban untuk pertanyaan ini.
iPadDeveloper2011

1
Ketika saya mencoba ini, dan baru saja mengetahui bahwa acara hanya menyala ketika dua kondisi terpenuhi: 1) nilai berubah; dan 2) blur, saya bertanya-tanya apakah yang diharapkan banyak orang dari perubahan () lebih baik ditangani oleh keyup ()?
TARKUS

Karena changetidak didukung oleh IE9, Anda dapat menggunakan focusoutuntuk memiliki gim yang sama
Soma

247

Seperti @pimvdb katakan dalam komentarnya,

Perhatikan bahwa perubahan hanya akan diaktifkan ketika elemen input kehilangan fokus. Ada juga acara input yang menyala setiap kali kotak teks diperbarui tanpa perlu kehilangan fokus. Tidak seperti acara utama, ini juga berfungsi untuk menempel / menyeret teks.

(Lihat dokumentasi .)

Ini sangat berguna, layak untuk dijawab. Saat ini (v1.8 *?) Tidak ada .input () convenience fn di jquery, jadi cara untuk melakukannya adalah

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

6
Khususnya, IE <9 tidak mendukung sama sekali.
dlo

13
Karena Anda dapat mengikat banyak acara $('form').on('change input', function);melakukan trik untuk saya. Terima kasih.
justnorris

9
@Norris. Itu mungkin akan menyala dua kali ketika sebuah elemen diubah (1), dan kehilangan fokus (2). Itu bukan masalah untuk banyak tujuan, tetapi perlu dicatat.
iPadDeveloper2011

Diuji di IE9, backspace tidak akan dipecat
Jaskey

Catatan, ini akan diaktifkan untuk setiap perubahan input yang dibuat (yang mungkin Anda cari). Tapi, jika Anda mencari acara seperti "Saat selesai berganti", inilah contoh yang bagus .
Trevor Nestman

79

Saya akan menyarankan menggunakan acara keyup seperti di bawah ini:

$('elementName').keyup(function() {
 alert("Key up detected");
});

Ada beberapa cara untuk mencapai hasil yang sama jadi saya kira itu tergantung pada preferensi dan tergantung pada bagaimana Anda ingin itu bekerja dengan tepat.

Pembaruan: Ini hanya berfungsi untuk input manual bukan salin dan tempel.

Untuk menyalin dan menempel, saya akan merekomendasikan yang berikut ini:

$('elementName').on('input',function(e){
 // Code here
});

Saya merekomendasikan ini untuk input teks!
Vercas

20
Isi elemen input dapat diubah tanpa keyup dipecat. Misalnya Anda dapat menempelkan teks menggunakan mouse.
celicni

juga, perubahan tampaknya masih diperlukan untuk menangkap kotak centang
turbo2oh

30

Berikut 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 jqGridkontrol. Anda cukup mengetik ke kotak teks dan segera melihat hasilnya di jqGrid.


22

Ada satu dan hanya satu cara yang dapat diandalkan untuk melakukan ini , dan itu adalah dengan menarik nilai dalam suatu interval dan membandingkannya dengan nilai yang di-cache.

Alasan mengapa ini adalah satu-satunya cara adalah karena ada beberapa cara untuk mengubah bidang input menggunakan berbagai input (keyboard, mouse, tempel, riwayat peramban, input suara dll.) Dan Anda tidak pernah dapat mendeteksi semuanya menggunakan peristiwa standar dalam tanda silang lingkungan -browser.

Untungnya, berkat infrastruktur acara di jQuery, cukup mudah untuk menambahkan acara inputchange Anda sendiri. Saya 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);
    }
};

Gunakan seperti: $('input').on('inputchange', function() { console.log(this.value) });

Ada demo di sini: http://jsfiddle.net/LGAWY/

Jika Anda takut beberapa interval, Anda dapat mengikat / membatalkan ikatan acara ini di focus/ blur.


Apakah mungkin membuat kode Anda berfungsi seperti ini $('body').on('inputchange', 'input', function() { console.log(this.value) });:? Atau tidak, seperti yang disebutkan di sini: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost

13
Menulis dan meluncurkan kode seperti itu adalah kegilaan dengan dampak kinerja yang ekstrem.
Danubian Sailor

@ ŁukaszLech Tolong, ceritakan tentang hal itu. Tetapi jika Anda menekan fokus / blur peristiwa seperti yang saya sebutkan juga, interval hanya akan berjalan sementara. Tentunya, bahkan sebuah intel 386 dari 1988 dapat menangani satu interval?
David Hellsing

5
<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 thiskata kunci untuk mendapatkan akses ke seluruh elemen sehingga Anda dapat melakukan semua yang Anda butuhkan dengan elemen ini.


4

Berikut ini akan berfungsi meskipun itu panggilan dinamis / Ajax.

Naskah:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

Html,

<input class="addressCls" type="text" name="address" value="" required/>

Saya harap kode kerja ini akan membantu seseorang yang mencoba mengakses secara dinamis / panggilan Ajax ...


3
$("input").keyup(function () {
    alert("Changed!");
});

2

Anda cukup bekerja dengan id

$("#your_id").on("change",function() {
    alert(this.value);
});

Ini tidak menambah banyak jawaban yang ada.
Pang

2

Anda dapat melakukan ini dengan cara yang berbeda, keyup adalah salah satunya. Tetapi saya memberi 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 [nama = "vat_id"] ganti dengan ID atau nama input Anda .


2

Jika Anda ingin memicu acara saat Anda mengetik , gunakan yang berikut ini:

$('input[name=myInput]').on('keyup', function() { ... });

Jika Anda ingin memicu acara saat meninggalkan bidang input , gunakan yang berikut:

$('input[name=myInput]').on('change', function() { ... });

Untuk beberapa alasan ini tidak berhasil untuk saya, tetapi ini berhasil:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan

1
@Stefan, kode dalam contoh Anda disebut delegasi acara. Bidang input Anda pasti bertambah setelah inisialisasi halaman, itu sebabnya kode saya tidak bekerja untuk Anda.
Usman Ahmed

1
$("input").change(function () {
    alert("Changed!");
});

4
Masalah dari opsi ini adalah bahwa hanya berfungsi ketika Anda kehilangan fokus input
Yises

Itu masih akan cocok dengan beberapa kasus.
James Drinkard

1

Ini berhasil untuk saya. Jika bidang dengan bidang namaA diklik atau tombol apa pun yang dimasukkan, bidang pembaruan dengan bidang idB .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

0

Anda bisa menggunakannya .keypress().

Misalnya, perhatikan HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

Penangan acara dapat terikat ke bidang input:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Saya sepenuhnya setuju dengan Andy; semua tergantung pada bagaimana Anda ingin itu berfungsi.


1
Ini tidak berfungsi untuk operasi salin / tempel. Tidak ada peristiwa yang dipecat jika teks disisipkan dengan klik mouse.
DaveN59
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.