Как реализовать замену <input type = «text»> на jQuery?

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

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

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

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

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

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

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

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

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

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

Следующее будет работать, даже если это динамические / 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);
});

Вы можете сделать это по-разному, Keyup является одним из них. Но я приведу пример с изменениями.

$('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!");
});

Это сработало для меня. Если щелкнуть поле с именем fieldA или ввести любой ключ, то поле будет обновлено с id 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.");
});

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