Виртуальная клавиатура

При обработке ввода в поля формы иногда возникает необходимость организовать алфавитно-цифровой ввод пользователя без использовнаия обычной клавиатуры.

Например, ввод пароля в среде с кейлогерами или когда банально человек выходит в сеть из интернет-кафе за границей, где нет русской клавиатуры с кириллицей.

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

Чтобы определить, к каким полям добавлять виртуальную клавиатуру, используется класс keyboardInput.

Исходный код этого примера:

<link rel="stylesheet" type="text/css" href="/user/keyboard.css">
<form onSubmit="return false;">
    <p>
        <label for="name" style="display: inline-block; width: 80px;"><b>Логин</b></label>
        <input  type="text" maxLength="12" name="name" id="name" class="keyboardInput">
    </p>
    <p>
        <label for="pass" style="display: inline-block; width: 80px;"><b>Пароль</b></label>
        <input  type="password" maxLength="12" name="pass" id="pass" class="keyboardInput">
    </p>
</form>
<script type="text/javascript" src="/user/keyboard.js" charset="UTF-8"></script>

Необходимые файлы: keyboard.js, keyboard.png, keyboard.css. В строке 76 файла keyboard.js отредактируйте путь до keyboard.png. Все файлы можно загрузить одним архивом keyboard.rar.

Источник: https://www.greywyvern.com/code/js/javascript/keyboard