Mendeteksi kotak teks input yang diubah

Saya telah melihat banyak pertanyaan lain dan menemukan jawaban yang sangat sederhana, termasuk kode di bawah ini. Saya hanya ingin mendeteksi ketika seseorang mengubah isi kotak teks tetapi untuk beberapa alasan itu tidak berfungsi ... Saya tidak mendapatkan kesalahan konsol. Ketika saya mengatur breakpoint di browser pada change()fungsi itu tidak pernah mengenai itu.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

Anda dapat menggunakan inputacara Javascript di jQuery seperti ini:

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

Dalam JavaScript murni:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Atau seperti ini:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

coba keyup alih-alih perubahan.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Berikut dokumentasi resmi jQuery untuk .keyup () .

Setiap jawaban kehilangan beberapa poin, jadi inilah solusi saya:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

The Input Eventkebakaran di Keyboard input, mouse Drag , Autofill dan Copy-Paste diuji pada Chrome dan Firefox. Memeriksa nilai sebelumnya membuatnya mendeteksi perubahan nyata, yang berarti tidak menembak ketika menempelkan hal yang sama atau mengetik karakter yang sama atau lain-lain.

Contoh kerja: http://jsfiddle.net/g6pcp/473/

memperbarui:

Dan jika Anda ingin menjalankan change function hanya saat pengguna selesai mengetik dan mencegah memecat tindakan perubahan beberapa kali, Anda dapat mencoba ini:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Jika pengguna mulai mengetik (mis. "Foobar") kode ini mencegah Anda change actionuntuk menjalankan untuk setiap jenis pengguna huruf dan dan hanya berjalan ketika pengguna berhenti mengetik, Ini bagus khususnya ketika Anda mengirim input ke server (mis. Input pencarian), yang cara Server tidak hanya satu pencarian foobardan tidak enam pencarian untuk fkemudian fodan kemudian foodan foobdan sebagainya.

Input teks tidak memecat changeacara sampai kehilangan fokus. Klik di luar input dan peringatan akan ditampilkan.

Jika panggilan balik harus diaktifkan sebelum input teks kehilangan fokus, gunakan .keyup()acara tersebut.

onkeyup, onpaste, onchange, oninputtampaknya gagal ketika browser melakukan pengisian otomatis pada kotak teks. Untuk menangani kasus seperti ini, sertakan " autocomplete='off'" di bidang teks Anda untuk mencegah browser mengisi ulang kotak teks secara otomatis,

Misalnya,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

Dalam kasus saya, saya memiliki kotak teks yang dilampirkan ke datepicker. Satu-satunya solusi yang bekerja untuk saya adalah menanganinya di dalam event onSelect dari datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Saya pikir Anda dapat menggunakan keydownjuga:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

KERJA:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});