JQuery 'вход' событие

Я никогда не слышал о событии в jQuery под названием input пока не увидел этот jsfiddle .

Вы знаете, почему это работает? Это псевдоним для keyupили что-то?

$(document).on('input', 'input:text', function() {});

Происходит, когда текстовое содержимое элемента изменяется через пользовательский интерфейс.

Это не совсем псевдоним, keyupпотому что keyupсработает, даже если клавиша ничего не делает (например, нажатие, а затем отпускание клавиши управления вызовет keyupсобытие).

Хороший способ думать об этом так: это событие, которое срабатывает при изменении входных данных. Это включает, но не ограничивается, нажатие клавиш, которые изменяют ввод (так, например, Ctrlсамо по себе это не вызовет событие, а Ctrl-Vвставит некоторый текст), выбор опции автозаполнения, середина в стиле Linux -кликните вставку, перетаскивание и многое другое.

Смотрите эту страницу и комментарии к этому ответу для более подробной информации.

oninput Событие очень полезно для отслеживания изменений полей ввода.

Однако это не поддерживается в версии IE <9. Но более старые версии IE имеют свое собственное событие, onpropertychangeкоторое делает то же самое, что и oninput.

Так что вы можете использовать это так:

$(':input').on('input propertychange');

Чтобы иметь полную поддержку кроссбраузера.

Так как изменение свойства может быть инициировано для ЛЮБОГО изменения свойства, например, измененное свойство изменено, то вы должны включить это:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Используя jQuery, следующие идентичные в действительности:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

С input событием в браузерах, которые я тестировал, работает только второй шаблон.

Таким образом, вы ожидаете, что это сработает, но это НЕ (по крайней мере, в настоящее время):

$(':text').input(function(){ doSomething(); });

Опять же, если вы хотите использовать делегирование событий (например, чтобы настроить событие на #containerпрежде, чем ваш input.textбудет добавлен в DOM), это должно прийти на ум:

$('#container').on('input', ':text', function(){ doSomething(); });

К сожалению, опять же, это не работает в настоящее время!

Работает только этот шаблон:

$(':text').on('input', function(){ doSomething(); });

ИЗДАНО БОЛЬШЕ СОВРЕМЕННОЙ ИНФОРМАЦИИ

Я, конечно, могу подтвердить, что этот шаблон:

$('#container').on('input', ':text', function(){ doSomething(); });

СЕЙЧАС работает и во всех «стандартных» браузерах.

Как сказал Клаустрофоб, oninput поддерживается для IE9 +.

Тем не менее , «Событие oninput содержит ошибки в Internet Explorer 9. Оно не запускается, когда символы удаляются из текстового поля через пользовательский интерфейс только при вставке символов. Хотя событие onpropertychange поддерживается в Internet Explorer 9, но аналогично Событие oninput также содержит ошибки, оно не запускается при удалении.

Поскольку символы могут быть удалены несколькими способами (клавиши Backspace и Delete, клавиши CTRL + X, команда «Вырезать» и «Удалить» в контекстном меню), не существует хорошего решения для обнаружения всех изменений. Если символы удаляются с помощью команды «Удалить» контекстного меню, изменение не может быть обнаружено в JavaScript в Internet Explorer 9 ».

У меня хорошие результаты привязки как к вводу, так и к keyup (и к keydown, если вы хотите, чтобы он запускался в IE, удерживая нажатой клавишу Backspace).

Будьте осторожны при использовании INPUT. Это событие происходит в фокусе и размытии в IE 11. Но оно вызывается при изменении в других браузерах.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Я думаю, что «input» здесь просто работает так же, как «oninput» в модели событий DOM Level O.

Кстати:

Как прокомментировал silkfire, я тоже погуглил «входное событие jQuery». Таким образом, меня привели сюда, и я был поражен, узнав, что input является приемлемым параметром для команды jquery bind () . В jQuery в действии (стр. 102, изд. 2008) «вход» не упоминается как возможное событие (против 20 других, от «размытия» до «выгрузки»). Это правда, что на с. 92, обратное можно предположить по перечитыванию (т. Е. По ссылке на разные строковые идентификаторы между моделями уровня 0 и уровня 2). Это вводит в заблуждение.

jQuery имеет следующую подпись для .on()метода:.on( events [, selector ] [, data ], handler )

События могут быть любыми из перечисленных в этой ссылке:

https://developer.mozilla.org/en-US/docs/Web/Events

Тем не менее, они не все поддерживаются каждым браузером.

Mozilla сообщает следующее о входном событии:

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

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

работает как в IE, так и в Chrome