Як я можу реалізувати зміну <input type = "text"> за допомогою jQuery?

<select>має цей API. Про що <input>?

Можна використовувати .change()

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

Однак ця подія розпочнеться лише тоді, коли селектор втратив фокус, тому вам потрібно буде натиснути десь ще, щоб мати цю роботу.

Якщо це не зовсім підходить для вас, ви можете використовувати деякі інші події jQuery, такі як клавіатура , клавіша чи натискання клавіші - залежно від точного ефекту, який ви хочете.

Як сказав @pimvdb у своєму коментарі,

Зауважте, що зміна запуститься лише тоді, коли вхідний елемент втратить фокус. Існує також подія введення, яка спрацьовує кожного разу, коли текстове поле оновлюється, не втрачаючи уваги. На відміну від ключових подій, він також працює для вставки / перетягування тексту.

(Див. Документацію .)

Це настільки корисно, що варто відповісти на це. Наразі (v1.8 *?) У jquery немає зручності .input (), тому спосіб зробити це

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

Я б запропонував використовувати подію клавіатури приблизно на кшталт нижче:

$('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, досить легко додати власну подію для зміни входу. Я так зробив тут:

$.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ключове слово, щоб отримати доступ до всього елемента, щоб ви могли зробити все необхідне з цим елементом.

Далі працює, навіть якщо це динамічні / Ajax дзвінки.

Сценарій:

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

Html,

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

Я сподіваюся, що цей робочий код допоможе тому, хто намагається отримати доступ до динамічно / Ajax дзвінків ...

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

Ви можете просто працювати з ідентифікатором

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

Зробити це можна різними способами, клавіатура - один з них. Але я наводжу приклад нижче із зміною.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

Примітка: input [name = "vat_id"] замініть на вхідний ідентифікатор або ім'я .

Якщо ви хочете ініціювати подію під час введення , використовуйте наступне:

$('input[name=myInput]').on('keyup', function() { ... });

Якщо ви хочете ініціювати подію після виходу з поля введення , використовуйте наступне:

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

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

Це працювало для мене. Якщо натиснуто поле з полем іменіA або введена будь-яка клавіша, оновиться поле з полем idB .

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.");
});

Я повністю погоджуюся з Енді; все залежить від того, як ви хочете, щоб це працювало.