Виявити змінене текстове поле для введення

Я переглянув численні інші запитання та знайшов дуже прості відповіді, включаючи код нижче. Я просто хочу виявити, коли хтось змінює вміст текстового поля, але чомусь він не працює ... Я не отримую помилок консолі. Коли я встановлюю в браузері точку розриву на change()функції, вона ніколи не потрапляє на неї.

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

<input id="inputDatabaseName">

Ви можете використовувати inputподію Javascript у jQuery так:

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

У чистому JavaScript:

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

Або так:

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

спробуйте клавіатуру замість зміни.

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

Ось офіційна документація jQuery для .keyup () .

У кожній відповіді відсутні деякі моменти, тому ось моє рішення:

$("#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пожежах на клавіатури введення, довгий миша , автозаповнення і Copy-Paste протестовані на Chrome і Firefox. Перевірка попереднього значення змушує його виявляти реальні зміни, що означає не стріляти під час вставки однієї речі чи введення одного і того ж символу чи т.д.

Приклад роботи: http://jsfiddle.net/g6pcp/473/

оновлення:

І якщо ви хочете запускати свою програму change function лише тоді, коли користувач закінчує вводити та запобігати запуску дії зміни кілька разів, ви можете спробувати це:

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

Якщо користувач починає вводити текст (наприклад, "foobar"), цей код заважає change actionвиконувати всі типи букв користувача і працює лише тоді, коли користувач перестає вводити текст, це добре спеціально для того, коли ви надсилаєте вхід на сервер (наприклад, пошукові вводи), процесорний сервер робить тільки один пошук , foobarа не шість пошуків , fа потім , foа потім fooі foobі так далі.

Текстові введення не викликають changeподії, поки вони не втратять фокус. Клацніть поза вхідним повідомленням, і з’явиться повідомлення.

Якщо зворотний виклик повинен спрацювати, перш ніж введення тексту втратить фокус, використовуйте .keyup()подію.

onkeyup, onpaste, onchange, oninputЗдається, виходить з ладу, коли браузер виконує автозаповнення в текстових полях. Щоб вирішити такий випадок, включіть " autocomplete='off'" у ваше текстове поле, щоб запобігти автоматичному заповненню текстового поля браузером,

Наприклад,

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

У моєму випадку у мене було текстове поле, яке було прикріплено до вибору дат. Єдине рішення, яке працювало для мене, - це обробляти його всередині події onSelect дата-вибору.

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

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

Я думаю, ви також можете використовувати keydown:

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

РОБОТА:

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