Аналогично событию onkeydown событие onkeyup относится к событиям клавиатуры (Keyboard Events). Оно происходит, когда пользователь отпускает только что нажатую клавишу. Это событие, как правило, обрабатывают либо для всего документа, либо для полей ввода (input, textarea).
Пример обработки события onkeyup
Для того чтобы рассмотреть, как работает обработка события onkeyup
, давайте представим, что нам нужно отсортировать список контактов по нескольким буквам. Наверняка вы пользовались таким способом для быстрого доступа к данным человека в мобильном телефоне или почте.
Разметка страницы контактов
Для начала создадим разметку. Воспользуемся для этого возможностями css-фреймворка Bulma:
1. В заголовочной части страницы разместим ссылку на CDN Bulma:
1 2 3 |
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> </head> |
2. В <body> создадим код из компонента Panel, разбив его в нижней части на 2 столбца:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<body> <div class="container content is-medium"> <h1>Сортировка контактов по событию onkeyup</h1> <div class="panel"> <div class="panel-heading"> Контакты </div> <div class="panel-block"> <p class="control"> <input class="input is-primary" type="text" id="filterInput" placeholder="Поиск по имени..."> </p> </div> <div class="columns"> <div class="column"> <a class="panel-block" href="#">Андреев Антон</a> <a class="panel-block" href="#">Аверина Ирина</a> <a class="panel-block" href="#">Алан</a> <a class="panel-block" href="#">Борис</a> <a class="panel-block" href="#">Борн Николай</a> <a class="panel-block" href="#">Баранов Игорь</a> <a class="panel-block" href="#">Борисенко Алена</a> <a class="panel-block" href="#">Волобуев Александр</a> <a class="panel-block" href="#">Вареникова Анастасия</a> <a class="panel-block" href="#">Вербин Сергей</a> <a class="panel-block" href="#">Гордин Алексей</a> </div> <div class="column"> <a class="panel-block" href="#">Голосеева Милана</a> <a class="panel-block" href="#">Герман</a> <a class="panel-block" href="#">Даша</a> <a class="panel-block" href="#">Дементьева Елена</a> <a class="panel-block" href="#">Дорофеев Антон</a> <a class="panel-block" href="#">Дубинина Сабрина</a> <a class="panel-block" href="#">Еремин Даниил</a> <a class="panel-block" href="#">Еременко Дарья</a> <a class="panel-block" href="#">Жанна</a> <a class="panel-block" href="#">Железнова Мария</a> <a class="panel-block" href="#">Копейкина Инна</a> </div> </div> </div> </div> </body> |
Написание JS-кода
Страница контактов в нашей разметке - это редкий случай наличия множества ссылок. Поэтому для решения нашей задачи мы можем воспользоваться коллекцией document.links
. Обработчик события мы назначаем с помощью метода addEventListener()
для нашего поля ввода, получив ссылку на него с помощью метода document.getElementById()
. Все ссылки мы перебираем методом массива forEach()
, превратив сначала коллекцию html-элементов в обычный массив строкой linkItems = [].slice.call(linkItems)
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// получаем ссылку на поле ввода let filterInput = document.getElementById('filterInput'); // добавляем слушатель события filterInput.addEventListener('keyup', filterNames); function filterNames() { // получаем значение из поля ввода let filterValue = document.getElementById('filterInput').value.toLowerCase(); console.log(filterValue); let linkItems = document.links; linkItems = [].slice.call(linkItems); // проходим по колекции ссылок linkItems.forEach(a => { //выводим в консоль номер позиции, с которой совпадает подстрока в поле ввода с текстом ссылки console.log(a.innerHTML.toLowerCase().indexOf(filterValue)); a.innerHTML.toLowerCase().indexOf(filterValue) > -1 ? a.style.display = '': a.style.display = 'none'; }) } |
Значение в поле ввода и значение текста нашей ссылки мы приводим к нижнему регистру, а затем выполняем поиск подстроки, набранной пользователем, в строке нашей ссылки с помощью метода работы со строками 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.