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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

$.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.

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Script,

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

HTML,

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

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

Это сработало для меня. Если щелкнуть поле с именем fieldA или в любой введенной клавише он обновит поле с идентификатором fieldB.

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