Виявлення зміни входу в jQuery?


359

При використанні jquery .changeдля inputподії буде запущено лише тоді, коли вхід втратить фокус

У моєму випадку мені потрібно зателефонувати в службу (перевірити, чи значення дійсне), як тільки змінено вхідне значення. Як я міг це досягти?


3
який вхід? текстове вікно? прапорець? радіо? textarea? давайте подивимося, що ви придумали поки що
Патрісія

Вибачте, це введення тексту типу. І як я вже сказав, я спробував зміни, але це не спрацьовує так, як мені потрібно (для кожної зміни тексту у введенні). Я також спробував натиснути клавішу, але для того, щоб працювати це, мені доведеться відслідковувати, чи вхід "брудний" чи ні.
Banshee

2
якщо вони натискають клавішу, це зміниться 99% часу, ви завжди можете перевірити клавіші, які не були б у обробці подій.
Патрісія

Відповіді:


545

ОНОВЛЕНО для уточнення та прикладу

приклади: http://jsfiddle.net/pxfunc/5kpeJ/

Метод 1. inputподія

У сучасних браузерах використовують inputподію. Ця подія запуститься, коли користувач набирає текстове поле, вставляє, скасовує, в основному будь-коли, коли значення змінюється з одного значення на інше.

У jQuery зроби це так

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

починаючи з jQuery 1.7, замініть bindна on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Метод 2. keyupподія

Для старих браузерів використовується keyupподія (це запуститься, коли клавіша на клавіатурі буде випущена, ця подія може дати хибний позитивний результат, оскільки коли "w" відпущено, вхідне значення змінюється і keyupподія починається , але також коли Клавіша "shift" відпускається, якщо keyupподії запускаються, але змін не було внесено.). Також цей спосіб не спрацьовує, якщо користувач правою кнопкою миші натискає та вставляє з контекстного меню:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Спосіб 3. Таймер ( setIntervalабо setTimeout)

Щоб подолати обмеження, keyupви можете встановити таймер, щоб періодично перевіряти значення вводу, щоб визначити зміну значення. Ви можете використовувати setIntervalабо setTimeoutзробити цю перевірку таймера. Дивіться помічену відповідь на це питання SO: подія зміни текстового поля jQuery або перегляньте загадку для робочого прикладу з використанням focusта blurподій для запуску та зупинки таймера для конкретного поля введення.


Чи можете ви пояснити більше про це рішення? Як отримати поточне значення? Як змусити це запуститись лише тоді, коли будуть внесені зміни до поточного значення?
Банші

вхідна подія? немає подій введення в JQuery (поки) ... stackoverflow.com/q/11189136/104380
VSync

Для методу 2 я зазвичай пов'язую і клавіатуру, і зміну. Таким чином, у випадках, коли введення відбувається без натискання клавіші (як-от вставки), воно принаймні запустить подію, коли вхід втратить фокус.
rspeed

1
@AdiDarachi MutationObserver буде відслідковувати зміни елементів DOM. Однак користувач, що змінює дані в полі введення, не викликає зміну MutationObserver ... Я встановлюю тестовий випадок, лише зміна коду JS на атрибут innerTextабо valueатрибут (імітує введення користувача) викликає подія MutationObserver jsfiddle.net/pxfunc/ 04chgpws / 1 (див. Console.log для реєстрації подій MutationObserver). У вас є інший тестовий випадок, на який я можу подивитися?
MikeM

1
це не працює, коли сценарій змінює значення
FalcoGer

189

Якщо у вас HTML5:

  • oninput (запускається лише тоді, коли зміна насправді відбувається, але робить це негайно)

В іншому випадку вам потрібно перевірити всі ці події, які можуть вказувати на зміну значення вхідного елемента:

  • onchange
  • onkeyup( ні, keydown або keypressоскільки значення вводу ще не матиме нового натискання клавіші)
  • onpaste (коли підтримується)

а може:

  • onmouseup (Я не впевнений у цьому)

@naomik з мого тесту працює з вхідними прапорцями; крім IE / Edge. Можуть з’явитися деякі інші винятки, але розумніше використовувати onchange для цих типів вводу (IMHO).
HellBaby

82

За допомогою HTML5 та без використання jQuery ви можете використовувати inputподію :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Це запускатиметься кожного разу, коли текст введення змінюється.

Підтримується в IE9 + та інших браузерах.

Спробуйте в прямому ефірі jsFiddle тут .



1
'change' запускається лише при розмитті, а не при зміні тексту. Використовуйте подію "введення", щоб виявити текстові зміни.
Dermot Doherty

14

Як вже пропонували інші, рішення у вашому випадку полягає в обнюхуванні кількох подій .
Плагіни, які виконують цю роботу, часто слухають такі події:

$ введення . on ( 'змінити клавішу натискання клавіші mousedown click mouseup' , обробник );

Якщо ви думаєте , що може поміститися, ви можете додати focus, blurі інші події теж.
Я пропоную не перевищувати події для прослуховування, оскільки це завантажує в пам'ять браузера подальші процедури, що виконуються відповідно до поведінки користувача.

Увага: зауважте, що зміна значення вхідного елемента за допомогою JavaScript (наприклад, за допомогою .val()методу jQuery ) не призведе до жодної з вищевказаних подій.
(Довідка: https://api.jquery.com/change/ ).


Я також рекомендую додати фокус, щоб уникнути проблем із автозаповненням
бінар

Розумію. Я шукав, і фокус, схоже, підтримується лише IE і частково Chrome, я прав?
Емануель Дель Гранде

5
Так само, як легке доповнення: Щоб запустити подію з jQuery, ви можете викликати відповідну дію після, .val()наприклад, для події зміни у полі введення, ви зробите щось подібне ... $('#element').val(whatever).change()
techknowcrat

2

Якщо ви хочете, щоб подію було знято щоразу, коли щось змінено в межах елемента, ви можете використовувати подію клавіатури .


Гаразд, але це не більш-менш те саме, що клавіатура? Мені доведеться перевірити, чи вхід "брудний" сам?
Banshee

@SnowJim, якщо ви хочете робити речі лише тоді, коли фактично зміниться вхід, вам доведеться або використовувати onchange, або самостійно відстежувати стан. keydownне працює, тому що він спрацьовує до зміни стану вводу.
Альнітак

@Alnitak відверто, ось чому я задаю тут питання. Зміна не працює, вона кидається лише при виході з входу.
Банші

Слон у кімнаті звичайно рухливий. Напевно, жодні події на клавіатурі чи миші тут не принесуть великої користі. : p
Запитувачі

@Askdesigners Події клавіатури / вниз все одно повинні працювати однаково на мобільних пристроях.
Відхилення

2

// .blur спрацьовує, коли елемент втрачає фокус

$('#target').blur(function() {
  alert($(this).val());
});

// Для запуску вручну використовуйте:

$('#target').blur();

1
.change, як я вже сказав, кидається лише тоді, коли inout втрачає фокус і змінює значення, мені потрібно отримати рівну, як тільки зміна вводу (тексту) (як тільки текст у введенні буде змінено). Розмивання запуститься лише тоді, коли вхід втратить фокус.
Banshee

1

Є такі події jQuery, як клавіатура та натискання клавіш, які можна використовувати для введення елементів HTML. Ви можете додатково використовувати подію blur () .


1
.change, як я вже сказав, кидається лише тоді, коли inout втрачає фокус і змінює значення, мені потрібно отримати рівну, як тільки зміна вводу (тексту) (як тільки текст у введенні буде змінено). Розмивання запуститься лише тоді, коли вхід втратить фокус.
Banshee

1
ви не можете надійно перевірити значення вводу під час keypressподії, оскільки натиснута клавіша ще не змінила це значення.
Альнітак

0

Це охоплює всі зміни вхідних даних, використовуючи jQuery 1.7 і вище:

$(".inputElement").on("input", null, null, callbackFunction);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.