Вы здесь: Главная » JavaScript » Обработка события onkeyup

Обработка события onkeyup

Аналогично событию 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 в том, что скрипт срабатывает при каждом новом введенном символе как только пользователь отпускает клавишу.

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

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

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