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

Ответы:

220

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

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

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

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

Greg
источник
К сожалению, это не работает для скрытого ввода. Возможное решение, когда требуется замена на скрытом вводе: <input type = 'text' style = 'display: none' /> (с css) ..
NickGreen
304
Обратите внимание, что changeсрабатывает только тогда, когда элемент ввода потерял фокус. Существует также inputсобытие, которое срабатывает всякий раз, когда текстовое поле обновляется, и при этом не нужно терять фокус. В отличие от ключевых событий, он также работает для вставки / перетаскивания текста.
pimvdb
4
Отличный комментарий @pimvdb. Я использовал это, и превратил это в ответ на этот вопрос.
iPadDeveloper2011
1
Как я пытаюсь это сделать, и только что узнал, что событие происходит только тогда, когда выполняются два условия: 1) изменение значения; и 2) размытие, мне интересно, лучше ли то, что многие ожидают от change (), обрабатывается keyup ()?
ТАРКУС
Так changeкак IE9 не поддерживается, вы можете использовать его focusoutдля того же ассортимента
Soma
247

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

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

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

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

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
iPadDeveloper2011
источник
6
В частности, IE <9 не поддерживает вообще.
2013 года
13
Поскольку вы можете связать с несколькими событиями $('form').on('change input', function);сделали свое дело для меня. Спасибо.
Justnorris
9
@Norris. Это, вероятно, сработает дважды, когда элемент будет изменен (1-й), и потеряет фокус (2-й). Это не проблема для многих целей, но, тем не менее, стоит отметить.
iPadDeveloper2011
Протестировано на IE9, Backspace не будет запущен
Jaskey
Обратите внимание, что это будет срабатывать при каждом изменении ввода (которое может быть тем, что вы ищете). Но, если вы ищете такое событие, как «Когда вы закончите изменение», вот отличный пример .
Тревор Нестман
79

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

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

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

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

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

$('elementName').on('input',function(e){
 // Code here
});
Андрей
источник
Я определенно рекомендую этот для ввода текста!
Vercas
20
Содержимое элемента ввода может быть изменено без нажатия клавиш. Например, вы можете вставить текст с помощью мыши.
celicni
Кроме того, кажется, что изменение все еще требуется для
снятия флажков
30

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

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

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

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

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

Майк Гледхилл
источник
22

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

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

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

Дэвид Хеллсинг
источник
Является ли это возможно , чтобы сделать ваш код работать так: $('body').on('inputchange', 'input', function() { console.log(this.value) });? Или нет, как упомянуто здесь: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost
13
Написание и запуск такого кода - это безумие с огромным влиянием на производительность.
Дунайский моряк
@ ŁukaszLech Пожалуйста, расскажите мне об этом. Но если вы нажмете на события фокусировки / размытия, как я уже упоминал, интервал будет работать только временно. Конечно, даже Intel 386 от 1988 года может обрабатывать один интервал?
Дэвид Хеллсинг
5
<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ключевое слово, чтобы получить доступ ко всему элементу, чтобы вы могли делать все необходимое с этим элементом.

разработчик
источник
4

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

Автор сценария:

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

Html,

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

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

Vinith
источник
2

Вы можете просто работать с идентификатором

$("#your_id").on("change",function() {
    alert(this.value);
});
Сиддеш Мишра
источник
Это не добавляет много к существующим ответам.
Панг
2

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

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

Примечание: input [name = "vat_id"] замените на ваш идентификатор ввода или имя .

Рокан Нашп
источник
2

Если вы хотите вызвать событие при вводе , используйте следующее:

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

Если вы хотите вызвать событие при выходе из поля ввода , используйте следующее:

$('input[name=myInput]').on('change', function() { ... });
Усман Ахмед
источник
По некоторым причинам это не сработало для меня, но это сработало:$(document).on('change', 'input[name=myInput]', function() { ... });
Стефан
1
@Stefan, код в вашем примере называется делегированием событий. Ваши поля ввода должны были складываться после инициализации страницы, поэтому мой код не сработал для вас.
Усман Ахмед
1
$("input").change(function () {
    alert("Changed!");
});
Георг Шолли
источник
4
Проблема этой опции в том, что она работает только тогда, когда вы потеряли фокус ввода
Yises
Это все еще будет соответствовать некоторым случаям.
Джеймс Дринкард,
1

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

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});
Seefan
источник
0

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

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

kcho0
источник
1
Это не работает для операций копирования / вставки. Событие не запускается, если текст вставляется щелчком мыши.
DaveN59