Разработка клавиатуры для 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 в котором отображается значение таймера активности родительской страницы