При використанні jquery .change
для input
події буде запущено лише тоді, коли вхід втратить фокус
У моєму випадку мені потрібно зателефонувати в службу (перевірити, чи значення дійсне), як тільки змінено вхідне значення. Як я міг це досягти?
При використанні jquery .change
для input
події буде запущено лише тоді, коли вхід втратить фокус
У моєму випадку мені потрібно зателефонувати в службу (перевірити, чи значення дійсне), як тільки змінено вхідне значення. Як я міг це досягти?
Відповіді:
ОНОВЛЕНО для уточнення та прикладу
приклади: 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
подій для запуску та зупинки таймера для конкретного поля введення.
innerText
або value
атрибут (імітує введення користувача) викликає подія MutationObserver jsfiddle.net/pxfunc/ 04chgpws / 1 (див. Console.log для реєстрації подій MutationObserver). У вас є інший тестовий випадок, на який я можу подивитися?
Якщо у вас HTML5:
oninput
(запускається лише тоді, коли зміна насправді відбувається, але робить це негайно)В іншому випадку вам потрібно перевірити всі ці події, які можуть вказувати на зміну значення вхідного елемента:
onchange
onkeyup
( ні, keydown
або keypress
оскільки значення вводу ще не матиме нового натискання клавіші)onpaste
(коли підтримується)а може:
onmouseup
(Я не впевнений у цьому)За допомогою HTML5 та без використання jQuery ви можете використовувати input
подію :
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
Це запускатиметься кожного разу, коли текст введення змінюється.
Підтримується в IE9 + та інших браузерах.
Спробуйте в прямому ефірі jsFiddle тут .
Як вже пропонували інші, рішення у вашому випадку полягає в обнюхуванні кількох подій .
Плагіни, які виконують цю роботу, часто слухають такі події:
$ введення . on ( 'змінити клавішу натискання клавіші mousedown click mouseup' , обробник );
Якщо ви думаєте , що може поміститися, ви можете додати focus
, blur
і інші події теж.
Я пропоную не перевищувати події для прослуховування, оскільки це завантажує в пам'ять браузера подальші процедури, що виконуються відповідно до поведінки користувача.
Увага: зауважте, що зміна значення вхідного елемента за допомогою JavaScript (наприклад, за допомогою .val()
методу jQuery ) не призведе до жодної з вищевказаних подій.
(Довідка: https://api.jquery.com/change/ ).
.val()
наприклад, для події зміни у полі введення, ви зробите щось подібне ... $('#element').val(whatever).change()
Якщо ви хочете, щоб подію було знято щоразу, коли щось змінено в межах елемента, ви можете використовувати подію клавіатури .
onchange
, або самостійно відстежувати стан. keydown
не працює, тому що він спрацьовує до зміни стану вводу.
// .blur спрацьовує, коли елемент втрачає фокус
$('#target').blur(function() {
alert($(this).val());
});
// Для запуску вручну використовуйте:
$('#target').blur();
Є такі події jQuery, як клавіатура та натискання клавіш, які можна використовувати для введення елементів HTML. Ви можете додатково використовувати подію blur () .
keypress
події, оскільки натиснута клавіша ще не змінила це значення.