Разработка клавиатуры для touchscreen на JS

1. Виртуальная клавиатура KioskVirtualKeyboard.js

На картинке приведен пример существующей клавиатуры, дизайн кнопок должен быть таким как в примере. Дизайн окна может быть улучшен/стилизован. Рассположение – стандартное клавиатуры. Требования:

1.1. Весь код клавиатуры лежит в отдельном файле KioskKeyboardEx.js

1.2. Клавиатура «рисуется» вызовом функции GetKeyboardEx и появляется как модально окно в браузере

1.3. Тестирование достаточно проводить только под Chrome

1.4. Кнопки клавиатуры должны быть активными – реагировать на нажатия

1.5. Кнопка окончания ввода должна называться «Ввод» и вписываться в общий стиль клавиатуры.

1.6. Добавить кнопки переключения регистра. Обозначить кнопку, переключения в верхний регистр, более понятно для обычного человека. Как вариант стрелочка вверх.

1.7. Добавить кнопки смены языка EN|UA, реализовать ввод информации на 2-х языках

1.8. Изменить дизайн Enter, вписать его в общий стиль клавиатуры

1.9. Поле ввода должно помещать 160 символов. Символы не должны вылазить за область поля ввода.

1.10. В левом нижнем углу – таймер неактивности пользовательского ввода. По его истечении – закрытие окна ввода и возврат пустого текста.

1.11. При нажатии на любую кнопку таймер активности в текущем окне сбрасывает значение в настроечное (Например 30 сек)

1.12. При нажатии на любую кнопку таймер активности на родительской странице сбрасывает значение в настроечное. Для этого в

пишем значение 60.

, где externalTimerSelector – id тега div

1.13. В вызове функции задается строка регуляного выражения текста. В случае пустрой строки – проверка не производится. В случае непустой, если введенная строка не удовлетворяет регулярному выражению, при нажатии на кнопку «Ввод», проводится проверка и появляется окно «Данні некоректні. Змініти дані.» с кнопкой Ок. Окно с клавиатурой е закрывается до момента ввода корректных данных или пустой строки.

Параметры вызова функции:

GetInputText(outputElement, maxLen, externalTimerSelector)

- outputElement – id input элемента в который возвращается введенный текст

- regex – регулярное выражение на вводимый текст

- externalTimerSelector – id div в котором отображается значение таймера активности родительской страницы