Событие jQuery 'input'

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Итак, вы можете использовать его следующим образом:

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

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

Так как свойство change может быть вызвано для изменения свойства ANY, например, свойство disabled изменено, то вы хотите включить это:

$(':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 */
    }
});

Ответ 3

Используя 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(); });

СЕЙЧАС РАБОТАЕТ также во всех "стандартных" браузерах.

Ответ 4

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

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

Так как символы могут быть удалены несколькими способами (клавиши Backspace и Delete, CTRL + X, Cut и Delete в контекстном меню), нет хорошего решения для обнаружения всех изменений. Если символы удаляются командой Delete в контекстном меню, эта модификация не может быть обнаружена в JavaScript в Internet Explorer 9. "

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

Ответ 5

Я думаю, что "enter" просто работает здесь так же, как "oninput" делает в модели событий уровня DOM.

Кстати:

Как и прокомментировал это silkfire, я тоже искал google для события ввода jQuery. Таким образом, меня привели сюда и поразили, что "вход" является приемлемым параметром для команды jquery bind(). В jQuery in Action (стр. 102, 2008 ред.) "Enter" не упоминается как возможное событие (против 20 других, от "размытия" до "разгрузки" ). Это правда, что на с. 92, противоположное можно было бы предположить из перечитывания (то есть из ссылки на разные идентификаторы строк между моделями Уровня 0 и Уровня 2). Это довольно вводит в заблуждение.

Ответ 7

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

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

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

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

Mozilla заявляет следующее о событии ввода:

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

Ответ 8

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

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