Виртуальная клавиатура - для чего она нужна? Потребность может возникнуть как в случае если нет реальной клавиатуры - например это терминал, или же нужно обеспечить безопасный ввод т.е. реализуем защиту от кейлогеров.
Пример:
Как установить виртуальную клавиатуру на сайт?
Очень просто. Вот архив скачать.
- keyboard.css – файл стилей
- keyboard.js – скрипт клавиатуры
- keyboard.png – икона клавиатуры
В этом примере файлы складываем в папку “/images/test/”
Предлагаемое решение реализовано на JavaScript, легко поддается конфигурированию, поддерживает много языков (25 штук) от которых при желании легко можно и избавиться. Это позволит существенно (в 2 раза) уменьшить размер файлов.
Создаем модуль поддерживающий произвольный HTML-код. Пишем в него в режиме html разметки:
<script type="text/javascript" src="/images/test/keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="/images/test/keyboard.css">
</head>
<body>
<input type="text" value="" class="keyboardInput" id="zzz">
<script type="text/javascript">
var myInput = document.getElementById('zzz');
if (!myInput.VKI_attached) VKI_attach(myInput);
</script>
</body>
Все, выбираем позицию и публикуем модуль. Пример позволит вам увидеть как все работает, а свою реализацию продумайте сами.
Конфигурирование:
Чтобы сменить язык ввода по-умолчанию, октройте файл keyboard.js и измените значение переменной this.VKI_kt, например так:
this.VKI_kt = "Greek";
Чтобы прикрепить клавиатуру к созданному текстовому элементу, можно сделать так:
var foo = document.createElement('input');
document.body.appendChild(foo);
VKI_attach(foo);
Чтобы приатачить клавиатуру ранее созданному элементу, можно сделать так:
var myInput = document.getElementById('myInput');
if (!myInput.VKI_attached) VKI_attach(myInput);
Чтобы закрыть клавиатуру, можно написать функцию, подобную этой:
function closeDialogue() {
document.getElementById('myDialogue').style.display = "none";
VKI_close();
}
Скачать: 