Как мне реализовать onchange of <input type="“text”"> с помощью jQuery?
Вопрос
<select>
имеет этот API.О чем <input>
?
Решение
Вы можете использовать .change ()
$('input[name=myInput]').change(function() { ... });
Однако это событие будет срабатывать только тогда, когда селектор потерял фокус, поэтому вам нужно будет щелкнуть в другом месте, чтобы выполнить эту работу.
Если это не совсем подходит для вас, вы можете использовать некоторые другие события jQuery , например keyup , нажатие клавиши или нажатие клавиши - в зависимости от того, какой именно эффект вы хотите.
Другие советы
Как сказал @pimvdb в своем комментарии,
Обратите внимание, что изменение сработает только тогда, когда элемент ввода потерял фокус. Существует также событие ввода, которое срабатывает при каждом обновлении текстового поля. без необходимости терять фокус. В отличие от ключевых событий это также работает для вставка / перетаскивание текста.
(см. документацию .)
Это так полезно, что стоит указать это в ответе. В настоящее время (v1.8 *?) Нет никакого удобства .input () для fn в jquery, поэтому способ сделать это
$('input.myTextInput').on('input',function(e){
alert('Changed!')
});
Я бы предложил использовать событие keyup примерно так:
$('elementName').keyup(function() {
alert("Key up detected");
});
Есть несколько способов достижения того же результата, поэтому я полагаю, что это зависит от предпочтений и зависит от того, как вы хотите, чтобы он работал точно.
Обновление: это работает только для ручного ввода, а не для копирования и вставки.
Для копирования и вставки я бы рекомендовал следующее:
$('elementName').on('input',function(e){
// Code here
});
Вот код, который я использую:
$("#tbSearch").on('change keyup paste', function () {
ApplyFilter();
});
function ApplyFilter() {
var searchString = $("#tbSearch").val();
// ... etc...
}
<input type="text" id="tbSearch" name="tbSearch" />
Это работает довольно хорошо, особенно в сочетании с элементом управления jqGrid
. Вы можете просто ввести текстовое поле и немедленно просмотреть результаты в jqGrid
. Р>
Существует один и только один надежный способ сделать это , это путем извлечения значения в интервале и сравнения его с кэшированным значением. Р>
Причина, по которой это единственный способ, заключается в том, что существует несколько способов изменить поле ввода с помощью различных входов (клавиатура, мышь, вставка, история браузера, голосовой ввод и т. д.), и вы никогда не сможете обнаружить их все с помощью стандартных событий в кросс-браузерной среде.
К счастью, благодаря инфраструктуре событий в jQuery, довольно легко добавить собственное событие inputchange. Я сделал это здесь:
$.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
.
<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
, чтобы получить доступ ко всему элементу, чтобы вы могли делать все необходимое с этим элементом.
$("input").keyup(function () {
alert("Changed!");
});
Следующее будет работать, даже если это динамические вызовы / Ajax.
Сценарий:
jQuery('body').on('keyup','input.addressCls',function(){
console.log('working');
});
HTML,
<input class="addressCls" type="text" name="address" value="" required/>
Я надеюсь, что этот рабочий код поможет кому-то, кто пытается получить доступ к динамическим вызовам / Ajax...
Вы можете просто работать с идентификатором
$("#your_id").on("change",function() {
alert(this.value);
});
$("input").change(function () {
alert("Changed!");
});
Это сработало для меня. Если щелкнуть поле с именем fieldA или ввести любой ключ, оно обновит поле с идентификатором fieldB .
jQuery("input[name='fieldA']").on("input", function() {
jQuery('#fieldB').val(jQuery(this).val());
});
Вы можете использовать .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.");
});
Я полностью согласен с Энди; все зависит от того, как вы хотите, чтобы это работало.
Вы можете сделать это по-разному, keyup является одним из них. Но я приведу пример с изменениями. Р>
$('input[name="vat_id"]').on('change', function() {
if($(this).val().length == 0) {
alert('Input field is empty');
}
});
Примечание: input [name = " vat_id "] замените его идентификатором или name .