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

<select>memiliki API ini. Bagaimana dengan <input>?

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.

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!')
});

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
});

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.

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.

<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.

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 ...

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

Anda cukup bekerja dengan id

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

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 .

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() { ... });

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

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());
});

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.