событий jQuery 'ввод'

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

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

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

8 ответов

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

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

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

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

171

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

однако он не поддерживается в IE версии onpropertychange что делает то же самое как oninput.

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

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

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

поскольку propertychange может быть вызван для любого изменения свойства, например, свойство 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 */
    }
});
141

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

теперь работает также во всех "стандартных" браузерах.

11

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

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

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

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

2

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

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

2

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

кстати:

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

1

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

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

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

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

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

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

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

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

-8