Virtual-keyboard

1. Screenshot:
2. Deploy: https://funfordima.github.io/virtual-keyboard/

Prepare and test

1. Install Node.js
2. Fork this repository: virtual-keyboard
3. Clone your newly created repo: https://github.com/<%your_github_username%>/virtual-keyboard/
4. Go to folder virtual-keyboard
5. To install all dependencies use npm install

Базовая функциональность

• при клике мышкой по клавишам с символами, эти символы отображаются в окне ввода текста. Есть клавиша пробел
• есть клавиша CapsLock, переводящая все буквы в верхний регистр. Активное и неактивное состояние клавиши отличаются визуально
• есть клавиша Backspace, удаляющая символы перед курсором. Есть клавиша Enter для перехода на новую строку
• клавиатуру можно скрыть и отобразить на экране
• в окне для ввода текста сохраняются все возможности обычной физической клавиатуры: текст можно набирать, выделять, удалять, добавлять текст в средину строки и т.д. При вводе текста с физической клавиатуры, текст может набираться как на языке виртуальной клавиатуры (предпочтительный вариант), так и на языке, который в данный момент указан в операционной системе
• в окне для ввода текста отображается текущая позиция курсора в виде вертикальной мигающей чёрточки

Клавиша Shift

• клавиша Shift меняет регистр букв - строчные переводит в заглавные, заглавные (при зажатой CapsLock) переводит в строчные
• клавиша Shift позволяет выводить дополнительные символы вместо цифр и символов основной раскладки
• активное и неактивное состояние клавиши Shift отличаются визуально
• переключение клавиши Shift происходит по клику, аналогично тому, как переключается состояние клавиши CapsLock в исходном проекте

Смена языка en/ru

• для смены языка добавлена дополнительная клавиша en/ru, при клике по которой происходит переключение между русской и английской раскладкой клавиатуры
• при переключении языка на клавише en/ru отображается установленный в данный момент язык
• при переключении языка на других клавишах клавиатуры отображаются символы выбранного языка, при кликам по ним эти символы выводятся в окно для ввода текста
• при зажатой клавише Shift на клавишах отображаются и в окне для ввода текста выводятся дополнительные символы соответствующей раскладки

Горизонтальные стрелки для перемещения в пределах строки

• для перемещения в пределах строки добавлены стрелки влево-вправо клики по которым реализуют горизонтальную навигацию курсора. Визуально позиция курсора отображается в виде вертикальной мигающей чёрточки
• после перемещения позиции курсора ввод/удаление текста происходит по текущей позиции курсора в т.ч. внутри строки

Подсветка клавиш виртуальной клавиатуры при кликах по клавишам физической клавиатуры

• нажатие на клавиши физической клавиатуры подсвечивает соответствующие алфавитно-цифровые клавиши, клавиши с символами, клавишу пробел виртуальной клавиатуры
• символы нажатых алфавитно-цифровых клавиш, клавиш с символами и пробел выводятся в окне для ввода текста
• нажатие на клавиши Shift, CapsLock, Backspace, Enter физической клавиатуры подсвечивает соответствующие клавиши виртуальной клавиатуры, переводит клавиши Shift и CapsLock в активное состояние, производит то же действие, которое происходит при кликах по клавишам Shift, CapsLock, Backspace, Enter мышкой (смена регистра, удаление символа, переход на новую строку и т.д).

Озвучивание нажатия клавиш

• при печати на виртуальной клавиатуре воспроизводится звук пишущей машинки, или другие звуки. Если звуки воспроизводятся и при печати на реальной клавиатуре, это не является ошибкой.
• звуки при печати в русской и английской раскладке отличаются. Предусмотрены уникальные звуки для клавиш Shift, CapsLock, Backspace, Enter
• есть возможность включить и отключить озвучивание нажатия клавиш, для этого на виртуальной клавиатуре предусмотрена отдельная клавиша. Активное и неактивное состояние данной клавиши отличается визуально и переключается кликом.

Клавиатура адаптируется под размер страницы

• размер клавиш виртуальной клавиатуры и шрифта на них адаптируется под размер экрана. Минимальная ширина страницы, при которой проверяется корректность отображения и работы клавиатуры - 500рх
• размер шрифта на клавишах не меньше 14рх, достаточная контрастность шрифта и фона клавиш в активном и неактивном состоянии Colour contrast checking tools

Голосовой ввод текста

• на виртуальной клавиатуре есть отдельная клавиша, при клике по которой можно включить/отключить голосовой ввод текста. Активное и неактивное состояние клавиши отличаются визуально
• если голосовой ввод текста включён, в окне для ввода текста выводится текст, который поступает на устройство записи звука (например, микрофон или стереомикшер) указанное в настройках операционной системы