Отображения ввода на электронной клавиатуре RUDEBOXМне всегда нравилась цифровизация на сайте, чтобы пользователь мог наглядно просматривать свои действия, в данном уроке мы рассмотрим один из таких вариантов, а именно создание электронной клавиатуры,которая будет отображать ввод текста, выделяя нажатые клавиши на ней. Клавиатура выполнена в двух тонах: белая и черная, стилизацию можно переключить с помощью тумблера над клавиатурой, также у нас будет строка ввода текста, где вы сможете наглядно увидеть как работает клавиатура и вводимый текст. Смотрится достаточно красиво, все оформлено в стиле минимализма.

 

Такая клавиатура станет отличным дополнением для Вашего сайта, она позволит придать небольшой изюминки для Вашего проекта, неординарным подходом к воду данных. И так, давайте приступим.

Шаг 1. HTML

Разметка будет простая, у нас будет контейнер, в котором будет содержаться кнопка переключения фона, у нее будет соответствующий класс «switch», кроме этого у нас будет содержаться класс ‘wrapper’, в котором мы размещаем необходимо нам количество кнопок:

Также у нас будет форма ввода, которую мы немного приукрасили стилями, кто не знает, форму ввода можно вызвать с помощью команды «input».

Отображения ввода на электронной клавиатуре на JS RUDEBOX

Шаг 2. CSS

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

Кроме этого, мы добавляем окружность синего цвета, которая будет отображаться на нажатой нами клавише с небольшой анимацией, информируя пользователя о вводе.

Шаг 3. JS

Нам необходимо, чтобы ввод текста считывался с нашей физической клавиатуры и отображался на электронно на нашем экране, каждая физическая клавиша имеет свою кодировку и порядковый номер, это мы указываем в наших функциях JS:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.