Может ли jQuery проверить, изменилось ли входное содержимое?

можно ли привязать событие javascript(jQuery лучше всего) к" изменению " входного значения формы?

Я знаю, о .change() метод, но он не запускается, пока вы (курсор) не покинете(ы) поле ввода. Я также рассмотрел возможность использования .keyup() метод, но он реагирует и на клавиши со стрелками и так далее.

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

44
input javascript jquery onchange

9 ответов

существует простое решение, которое является HTML5 input событие. Он поддерживается в текущих версиях всех основных браузеров для <input type="text"> элементы и есть простой обходной путь для IE

пример (кроме IE 

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});
70

да, сравните его со значением, которое было до его изменения.

var previousValue = $("#elm").val();
$("#elm").keyup(function(e) {
    var currentValue = $(this).val();
    if(currentValue != previousValue) {
         previousValue = currentValue;
         alert("Value changed!");
    }
});

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

12
   function checkChange($this){
    var value = $this.val();      
    var sv=$this.data("stored");            
        if(value!=sv)
          $this.trigger("simpleChange");    
    }

$(document).ready(function(){
$(this).data("stored",$(this).val());   
    $("input").bind("keyup",function(e){  
    checkChange($(this));
});        
$("input").bind("simpleChange",function(e){
    alert("the value is chaneged");
    });        
});

вот скрипка http://jsfiddle.net/Q9PqT/1/

7

вы также можете сохранить начальное значение в атрибуте данных и проверить его с текущим значением.

<input type="text" name="somename" id="id_someid" value="" data-initial="your initial value" /> 

$("#id_someid").keyup(function() {
    return $(this).val() == $(this).data().initial;
});

вернет true, если начальное значение не изменилось.

5

вы можете использовать использование данных в jQuery и поймать все события, которые затем проверяет его на последнее значение (непроверенное):

$(document).ready(function() {  
    $("#fieldId").bind("keyup keydown keypress change blur", function() {
        if ($(this).val() != jQuery.data(this, "lastvalue") {
         alert("changed");
        }
        jQuery.data(this, "lastvalue", $(this).val());
    });
});

это будет работать довольно хорошо против длинного списка элементов. Используя jQuery.data означает, что вам не нужно создавать переменную javascript для отслеживания значения. Вы могли бы сделать $("#fieldId1, #fieldId2, #fieldId3, #fieldId14, etc") для отслеживания многих областях.

обновление: добавил blur до bind список.

2

мне пришлось использовать этот код для сканера, который вставлял материал в поле

$(document).ready(function() {
  var tId,oldVal;
  $("#fieldId").focus(function() {
     oldVal = $("#fieldId").val();
     tId=setInterval(function() { 
      var newVal = $("#fieldId").val(); 
      if (oldVal!=newVal) oldVal=newVal;
      someaction() },100);
  });
  $("#fieldId").blur(function(){ clearInterval(tId)});
});

Не проверял...

1

Я не думаю, что есть "простое" решение. Вероятно, вам нужно будет использовать оба события onKeyUp и onChange, чтобы вы также ловили, когда изменения производятся с помощью мыши. Каждый раз, когда вызывается ваш код, вы можете сохранить значение, которое вы "видели" на этом.seenValue прикрепляется прямо к полю. Это должно быть немного проще.

1

вы можете установить события на комбинации клавиш и мыши событий, а также onblur, чтобы быть уверенным. В этом случае сохраните значение входных данных. В следующем вызове сравните текущее значение с последним сохраненным значением. Делай свою магию, только если она действительно изменилась.

чтобы сделать это более или менее чистым способом:

вы можете связать данные с элементом DOM (поиск api.jquery.com/jQuery.data ) таким образом, вы можете написать общий набор обработчиков событий, назначенных всем элементы в форме. Каждое событие может передать элемент, который был вызван одной общей функцией. Эта одна функция может добавить старое значение к данным элемента. Таким образом, Вы сможете реализовать это как общий фрагмент кода, который работает на всей вашей форме и каждой форме, которую вы будете писать с этого момента. :) И это, вероятно, займет не более 20 строк кода, я думаю.

пример в этой скрипке:http://jsfiddle.net/zeEwX/

1

поскольку пользователь может войти в меню ОС и выбрать вставить с помощью мыши, нет безопасного события, которое вызовет это для вас. Единственный способ, которым я обнаружил, что всегда работает, - это иметь setInterval, который проверяет, изменилось ли входное значение:

var inp = $('#input'),
    val = saved = inp.val(),
    tid = setInterval(function() {
        val = inp.val();
        if ( saved != val ) {
            console.log('#input has changed');
            saved = val;
    },50);

вы также можете настроить это с помощью специального события jQuery.

0