Обнаружение измененного текстового поля ввода

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

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

<input id="inputDatabaseName">
230
input jquery

8 ответов

можно использовать oninput событие, как в 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();"/>
422

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

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

здесь официальная документация jQuery для .клавиша вверх().

164

в каждом ответе отсутствуют некоторые моменты, поэтому вот мое решение:

$("#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 пожары на клавиатура ввод Перетащить Мышкой, автозаполнение и Копировать-Вставить протестировано на 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 и так далее.

88

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

текстовые входы не стрелять change событие, пока они не потеряют фокус. Нажмите за пределами ввода, и появится предупреждение.

Если обратный вызов должен сработать до того, как текстовый ввод потеряет фокус, используйте .keyup() событие.

11

в моем случае, у меня есть TextBox, который был прикреплен к меню выбора даты. Единственным решением, которое сработало для меня, было обработать его внутри события onSelect datepicker.

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

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

Я думаю, вы можете использовать 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;
  }
});
0

работает:

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