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

Ответ 1

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

• События клавиатуры jQuery
• Поймать только нажатия клавиш, которые меняют ввод?

Пример (кроме IE < 9: см. ссылки выше для обхода):

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

Ответ 2

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

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

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

Ответ 3

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/

Ответ 4

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

<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") для отслеживания многих полей.

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

Ответ 6

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

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

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

В этой скрипте показан пример: http://jsfiddle.net/zeEwX/

Ответ 7

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

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

Не тестировалось...

Ответ 8

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

Ответ 9

Так как пользователь может войти в меню ОС и выбрать вставить с помощью мыши, нет безопасного события, которое вызовет это для вас. Единственный способ, которым я всегда работал, это иметь 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.