Справочник API
.keyup() в jQuery
Содержание статьи
-
Категории: Events › Keyboard Events
Устанавливает (или вызывает) обработчики JavaScript события keyup (когда отпущена клавиша на клавиатуре) для всех элементов набора jQuery. Актуально для элементов формы и <body>.
Синтаксис и описание:
Добавлено в jQuery 1.0.keyup( handler( eventObject ) )
Добавлено в jQuery 1.4.3.keyup( [ eventData ,] handler( eventObject ) )
Добавлено в jQuery 1.0.keyup( )
Команда .keyup() — сокращённый вариант события keyup, которое возникает в момент отпускания клавиши на клавиатуре, пока элемент находится в фокусе. В отличие от .keydown(), не повторяется при удержании клавиши — срабатывает один раз, при отпускании.
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
eventData – (объект) Данные, доступные обработчику через event.data.
handler( eventObject ) – Функция-обработчик события keyup. Код клавиши — в event.which.
Примечание:
Для подсчёта символов, живого поиска и других сценариев, где важно итоговое значение поля, а не факт нажатия клавиши, точнее использовать нативное событие input: оно срабатывает и при вставке текста мышью или через контекстное меню, чего keyup не улавливает.
Примечание:
При живом поиске (запрос к серверу по мере ввода) обработчик стоит откладывать через debounce, чтобы не отправлять запрос на каждое нажатие клавиши, а только когда пользователь на короткое время перестал печатать.
В jQuery 3.x и 4.0:
Шорткат .keyup() deprecated с jQuery 3.3, но не удалён — работает в 3.7.1 и 4.0. Замена:
.on("keyup", handler)вместо .keyup(handler),.trigger("keyup")вместо .keyup().
Примеры:
Устаревший, но рабочий синтаксис: счётчик оставшихся символов в текстовом поле.
$('#comment').keyup(function() { var left = 200 - $(this).val().length; $('#chars-left').text(left); });Тот же счётчик надёжнее реализовать на событии input (учитывает вставку из буфера обмена).
$('#comment').on('input', function() { var left = 200 - $(this).val().length; $('#chars-left').text(left); });Живой поиск с debounce: запрос уходит только через 300 мс после того, как пользователь перестал печатать.
var timer; $('#search').on('keyup', function() { var query = $(this).val(); clearTimeout(timer); timer = setTimeout(function() { $.get('/search', { q: query }, function(html) { $('#results').html(html); }); }, 300); });