Определить измененное поле ввода текста

Я просмотрел множество других вопросов и нашел очень простые ответы, включая приведенный ниже код. Я просто хочу определить, когда кто-то изменяет содержимое текстового поля, но по какой-то причине оно не работает ... Я не получаю ошибок консоли. Когда я устанавливаю точку останова в браузере на 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();"/>

попробуйте keyup вместо изменения.

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