Değiştirilmiş giriş metin kutusunu algıla

Diğer birçok soruya baktım ve aşağıdaki kod da dahil olmak üzere çok basit cevaplar buldum. Birisinin bir metin kutusunun içeriğini değiştirdiğini algılamak istiyorum, ancak bir nedenden dolayı çalışmıyor ... Konsol hataları almıyorum. Tarayıcıda change()fonksiyonda bir kesme noktası belirlediğimde asla vurmaz.

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

<input id="inputDatabaseName">

inputJavascript olayını jQuery'de şu şekilde kullanabilirsiniz :

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

Saf JavaScript'te:

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

Veya bunun gibi:

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

değiştirmek yerine keyup komutunu deneyin.

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

İşte .keyup () için resmi jQuery belgeleri .

Her cevabın bazı noktaları eksik, işte benim çözümüm:

$("#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>

Input EventÜzerinde yangınlar Klavye girişi, fare Drag , otomatik doldurma ve Kopyala-Yapıştır Chrome ve Firefox üzerinde test. Önceki değerin kontrol edilmesi, gerçek değişiklikleri algılamasını sağlar; bu, aynı şeyi yapıştırırken veya aynı karakteri vb. Yazarken tetiklenmemesi anlamına gelir.

Çalışma örneği: http://jsfiddle.net/g6pcp/473/

Güncelleme:

Ve change function yalnızca kullanıcı yazmayı bitirdiğinde ve değişiklik eylemini birkaç kez tetiklemeyi engellediğinde çalıştırmak isterseniz , bunu deneyebilirsiniz:

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

Kullanıcı yazmaya başlarsa (örn. "Foobar") bu kod change action, her harf kullanıcı türü için çalışmanızı engeller ve yalnızca kullanıcı yazmayı bıraktığında çalışır, Bu özellikle girişleri sunucuya gönderdiğinizde (örn. Arama girişleri), yollu sunucu yapar tek arayışını foobarve altı değil arar fve sonra fove sonra foove foobvb.

Metin girişleri change odağı kaybedene kadar olayı başlatmaz. Girişin dışına tıklayın, uyarı görünecektir.

Metin girişi odağı kaybetmeden önce geri arama tetiklenirse, .keyup()etkinliği kullanın .

onkeyup, onpaste, onchange, oninputtarayıcı metin kutularında otomatik doldurma gerçekleştirdiğinde başarısız görünüyor. Böyle bir durumu ele autocomplete='off'almak için tarayıcının metin kutusunu otomatik olarak doldurmasını önlemek amacıyla metin alanınıza " " ekleyin,

Örneğin,

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

Benim durumumda, bir tarih seçici bağlı bir metin kutusu vardı. Benim için çalışan tek çözüm, tarih seçicinin onSelect olayında ele almaktı.

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

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

Ben de kullanabilirsiniz keydowndüşünüyorum:

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

ÇALIŞMA:

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