Может ли jQuery проверить, изменился ли входной контент? - PullRequest
Новая
       2

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

49 голосов
/ 24 сентября 2011

Можно ли связать событие javascript (лучше jQuery), чтобы как-то «изменить» входное значение формы?

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

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

Ответы [ 9 ]

75 голосов
/ 24 сентября 2011

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

Пример (кроме IE <9: см. Ссылки выше для обходного решения): </p> 

$("#your_id").on("input", function() {
    alert("Change to " + this.value);
});
14 голосов
/ 24 сентября 2011

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

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

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

7 голосов
/ 24 сентября 2011 
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/

6 голосов
/ 21 мая 2014

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

<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, если начальное значение не изменилось.

2 голосов
/ 24 сентября 2011

Вы можете использовать использование данных в 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.

1 голос
/ 24 сентября 2011

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

1 голос
/ 24 сентября 2011

Я должен был использовать этот тип кода для сканера, который вставлял вещи в поле 

$(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 голос
/ 24 сентября 2011

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

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

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

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

0 голосов
/ 24 сентября 2011

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

...