Как реализовать onchange <input type = "text"> с помощью jQuery?

Question

<select> имеет этот API. Как насчет <input>?

Answer 1

Вы можете использовать .change()

$('input[name=myInput]').change(function() { ... }); 

Однако это событие срабатывает только тогда, когда селектор потерял фокус, так что вам нужно будет щелкнуть где-нибудь еще, чтобы иметь эту работу.

Если это не совсем верно для вас, вы можете использовать некоторые другие jQuery events как keyup, keydown или keypress - в зависимости от конкретного эффекта, который вы хотите.

Answer 2

$("input").change(function() { 
    alert("Changed!"); 
}); 

Answer 3

Я предложил бы использовать KeyUp что-то событие, как показано ниже:

$('elementName').keyup(function() { 
alert("Key up detected"); 
}); 

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

Обновление: Это работает только для ручного ввода, а не для копирования и вставки.

Для копирования и вставки, я бы рекомендовал следующее:

$('elementName').on('input',function(e){ 
// Code here 
}); 

Answer 4

Вы можете использовать .keypress().

Для примера рассмотрим HTML:

<form> 
    <fieldset> 
    <input id="target" type="text" value="Hello there" /> 
    </fieldset> 
</form> 
<div id="other"> 
    Trigger the handler 
</div> 

обработчик событий может быть связан с полем ввода:

$("#target").keypress(function() { 
    alert("Handler for .keypress() called."); 
}); 

Я полностью согласен с Энди; все зависит от того, как вы хотите, чтобы он работал.

Answer 5

$("input").keyup(function() { 
    alert("Changed!"); 
}); 

Answer 6

Как @pimvdb сказал в своем комментарии,

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

(см documentation.)

Это настолько полезно, это стоит поместить его в ответ. В настоящее время (v1.8 *?) Нет .Входного() удобства Fn в JQuery, так что способ сделать это

$('input.myTextInput').on('input',function(e){ 
alert('Changed!') 
}); 

Answer 7

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

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

К счастью, благодаря инфраструктуре событий в jQuery, довольно легко добавить свое собственное событие ввода изменений. Я сделал это здесь:

$.event.special.inputchange = { 
    setup: function() { 
     var self = this, val; 
     $.data(this, 'timer', window.setInterval(function() { 
      val = self.value; 
      if ($.data(self, 'cache') != val) { 
       $.data(self, 'cache', val); 
       $(self).trigger('inputchange'); 
      } 
     }, 20)); 
    }, 
    teardown: function() { 
     window.clearInterval($.data(this, 'timer')); 
    }, 
    add: function() { 
     $.data(this, 'cache', this.value); 
    } 
}; 

использовать его как: $('input').on('inputchange', function() { console.log(this.value) });

Существует демо здесь: http://jsfiddle.net/LGAWY/

Если вы боитесь нескольких интервалов, вы можете связать/отвязать это событие на focus/blur.

Answer 8

Вот код, я использую:

$("#tbSearch").on('change keyup paste', function() { 
    ApplyFilter(); 
}); 

function ApplyFilter() { 
    var searchString = $("#tbSearch").val(); 
    // ... etc... 
} 

<input type="text" id="tbSearch" name="tbSearch" /> 

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

Answer 9

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" /> 

$(".firstName").on('change keyup paste', function() { 
    var element = $(this); 
    console.log(element); 
    var dataAttribute = $(element).attr("data-someattr"); 
    console.log("someattr: " + dataAttribute); 
}); 

Я рекомендую использовать this ключевое слово для того, чтобы получить доступ ко всему элементу так что ваши способны делать все, что нужно с этим элементом.

Answer 10

Следующие действия будут работать, даже если это динамические/Ajax-вызовы.

Сценарий:

jQuery('body').on('keyup','input.addressCls',function(){ 
    console.log('working'); 
}); 

Html,

<input class="addressCls" type="text" name="address" value="" required/> 

Я надеюсь, что этот рабочий код поможет кому-то, кто пытается получить доступ к динамически/Ajax звонки ...

Answer 11

Вы могли бы просто работать с идентификатором

$("#your_id").on("change",function() { 
    alert(this.value); 
}); 

Answer 12

Это сработало для меня. Если поле с именем нажатием на поле A или любая введенная клавиша вводит его поле с идентификатором fieldB.

jQuery("input[name='fieldA']").on("input", function() { 
    jQuery('#fieldB').val(jQuery(this).val()); 
});