jQuery подія "введення"

Я ніколи не чув про подію в jQuery, яку називали, inputпоки не побачив цю jsfiddle .

Чи знаєте ви, чому це працює? Це псевдонім для keyupчи чогось?

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

Виникає при зміні текстового вмісту елемента через користувальницький інтерфейс.

Це не зовсім псевдонім, keyupоскільки він keyupспрацює, навіть якщо клавіша нічого не робить (наприклад: натискання та вивільнення клавіші Control призведе до 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(); });

ЗАРАЗ працює також у всіх "стандартних" браузерах.

Як сказав claustrofob, on -put підтримується для IE9 +.

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

Оскільки символи можна видалити декількома способами (клавіші Backspace та Delete, CTRL + X, команда Cut та Delete в контекстному меню), немає хорошого рішення для виявлення всіх змін. Якщо символи видалено за допомогою команди «Видалити» контекстного меню, зміни не можуть бути виявлені в JavaScript в Internet Explorer 9. "

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

Будьте обережні, використовуючи INPUT. Ця подія викликає фокус і розмиття в IE 11. Але воно запускається при зміні в інших браузерах.

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

Я думаю, що "введення" просто працює тут так само, як "oninput" в моделі подій DOM Level O.

До речі:

Так само, як прокоментував це шовковий вогонь, я занадто гуглився для "події введення jQuery". Таким чином, мене сюди привели і здивували, дізнавшись, що "введення" є прийнятним параметром для команди jquery's bind () . У jQuery in Action (стор. 102, редакція 2008 р.) "Введення" не згадується як можлива подія (проти 20 інших, від "розмиття" до "вивантажувати"). Правда, на с. 92, навпаки, можна перечитати від перечитування (тобто від посилання на різні ідентифікатори рядків між моделями рівня 0 та рівня 2). Це цілком оману.

jQuery має такий підпис для .on()методу:.on( events [, selector ] [, data ], handler )

Події може бути будь-хто із перелічених у цій довідці:

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

Хоча їх підтримує не кожен браузер.

Про подію введення Mozilla заявляє наступне:

Подія введення DOM запускається синхронно при зміні значення або елемента. Крім того, він запускається на змістовні редактори при зміні його вмісту.

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

працює як в IE, так і в хромі