Виртуальная клавиатура - для чего она нужна? Потребность может возникнуть как в случае если нет реальной клавиатуры - например это терминал, или же нужно обеспечить безопасный ввод т.е. реализуем защиту от кейлогеров.

Пример:

 

Как установить виртуальную клавиатуру на сайт? 
Очень просто. Вот архив скачать.

  • 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();
}

 

Скачать: keyboard

 

 

 

__________________________________________________________________________________________________________________

скачать joomla | обновление joomla | модуль joomla | администрирование | seo продвижение | joomla магазиншаблоны сайтов

обратная связь 

При копировании материала ссылка на сайт joomla4.ru обязательна.