Аналогично событию onkeydown событие onkeyup относится к событиям клавиатуры (Keyboard Events). Оно происходит, когда пользователь отпускает только что нажатую клавишу. Это событие, как правило, обрабатывают либо для всего документа, либо для полей ввода (input, textarea).

Пример обработки события onkeyup

Для того чтобы рассмотреть, как работает обработка события onkeyup, давайте представим, что нам нужно отсортировать список контактов по нескольким буквам. Наверняка вы пользовались таким способом для быстрого доступа к данным человека в мобильном телефоне или почте.

Разметка страницы контактов

Для начала создадим разметку. Воспользуемся для этого возможностями css-фреймворка Bulma:

1. В заголовочной части страницы разместим ссылку на CDN Bulma:

2. В <body> создадим код из компонента Panel, разбив его в нижней части на 2 столбца:

Написание JS-кода

Страница контактов в нашей разметке - это редкий случай наличия множества ссылок. Поэтому для решения нашей задачи мы можем воспользоваться коллекцией document.links.  Обработчик события мы назначаем с помощью метода addEventListener() для нашего поля ввода, получив ссылку на него с помощью метода document.getElementById(). Все ссылки мы перебираем методом массива forEach(), превратив сначала коллекцию html-элементов в обычный массив строкой linkItems = [].slice.call(linkItems).

Значение в поле ввода и значение текста нашей ссылки мы приводим к нижнему регистру, а затем выполняем поиск подстроки, набранной пользователем, в строке нашей ссылки с помощью метода работы со строками indexOf(). Если совпадений нет, этот метод возвращает -1, и мы прячем все ссылки. Если же совпадение найдено, то вы увидите только те ссылки, которые соответствуют введенным символам.

Прелесть события onkeyup в том, что скрипт срабатывает при каждом новом введенном символе как только пользователь отпускает клавишу.

Попробуйте сами (открыть в новой вкладке):

Пример клавиатурного тренажера с обработкой события onkeyup

Замечательный пример от автора evilpaper на codepen.io показывает, как можно использовать обработку события onkeyup вместе с генерацией случайного числа методом Math.random() для выбора следующей буквы в клавиатурном тренажере. Почувствуйте себя героем, способным нажать нужную клавишу максимально быстро.

Проверьте себя, разместив руки на клавиатуре, а глаза - на экране. И не нужно устанавливать никаких программ, чтобы научиться слепой печати. Код на JavaScript заслуживает пристального разбора.

See the Pen Keyboard Hero by Elen (@ambassador) on CodePen.

Пример обработки события onkeyup с подсчетом нажатых клавиш

Красиво оформленный пример, который считает количество нажатых вами клавиш и выводит информацию в заголовок. Автор Braxton.

See the Pen Keyboard Counter by Braxton (@Braxtoony) on CodePen.

Пример обработки события onkeyup при вводе текста в textarea

В этом примере вы набираете текст в текстовом поле (textarea) изначально очень небольшой высоты. Но, как только текст перестает помещаться внутри без прокрутки, эта высота увеличивается, и текстовое поле расширяется.

Обработчик события здесь записан в виде стрелочной функции и с помощью метода addEventListener().

See the Pen Autoresize TextArea by Elen (@ambassador) on CodePen.

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *