Как реализовать onchange с помощью jQuery?

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

150
input jquery onchange

12 ответов

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

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

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

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

191

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

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

(см. документация.)

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

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

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

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

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

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

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

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

вот код, который я использую:

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

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

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

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

26

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

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

к счастью, благодаря мероприятию инфраструктура в 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.

22
<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 ключевое слово, чтобы получить доступ ко всему элементу, чтобы вы могли делать все, что вам нужно с этим элементом.

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

следующее будет работать, даже если это вызовы dynamic/Ajax.

сценарий:

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

Html,

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

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

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

это сработало для меня. Если поле с именем местаха нажата или любой введенный ключ обновляет поле с id fieldB.

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

вы можете просто работать с id 

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

можно использовать .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.");
});

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

1