Отслеживаем изменение данных в поле input


Периодически сталкиваешься, что необходимо обрабатывать изменения в поле input форм.

Например, запустить проверку и поиск, как только вводятся или вставляются данные в поле формы. Для обработки изменений в селектах прекрасно обходишься конструкцией:


<select onchange="call(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="result"></div>
<script>
   function call(msg)
   {
      document.getElementById('result').innerHTML = msg;
   }
</script>

А вот с текстовыми элементами возникает проблема что должна произойти потеря фокуса для события onchange или не отрабатывает onkeydown/onkeyup в случае копирования данных пользователем в поле. Но вот простое решение:


<input type="text" id="in" >
<div id="result"></div>
<script>
   var input = document.getElementById('in');
   input.oninput = function() {
      document.getElementById('result').innerHTML = input.value;
   };
</script>

В общем как всегда это не работает в старых версиях IE8.


Вариант отслеживания изменения текста в input если с него не убирают фокус в jQuery

<script>
   $('document').on('input', function () {
	var item = $(this);
        alert(item.val());

   });
</script>
#js

Copyright © 2013-2017