Виртуальная клавиатура для ввода цифр
Виртуальная клавиатура для ввода цифр
В этом уроке я расскажу, как создать виртуальную клавиатуру для ввода цифр в текстовые поля.
Такая клавиатура может пригодиться для защиты от спама (когда нужно ввести какие-то данные, для подтверждения того, что вы не спам-робот) или просто оригинально украсить вашу форму.
Пример такой клавиатуры вы можете увидеть, нажав на картинку ниже:
Шаг 1.
Скачаем и подключим необходимые для работы скрипты (скрипт jQuery, плагин keypad и таблицу стилей CSS).
Шаг 2.
Между тегами вставим следующий код:
Шаг 3.
В том месте, где мы хотим видеть поле с текстовой клавиатурой, вставим следующий код:
То есть простому текстовому полю мы добавили идентификатор "defaultKeypad", который указали в шаге 2.
Готово! Попробуйте установить эту клавиатуру и на свой сайт!
В этом уроке я расскажу, как создать виртуальную клавиатуру для ввода цифр в текстовые поля.
Такая клавиатура может пригодиться для защиты от спама (когда нужно ввести какие-то данные, для подтверждения того, что вы не спам-робот) или просто оригинально украсить вашу форму.
Пример такой клавиатуры вы можете увидеть, нажав на картинку ниже:
Шаг 1.
Скачаем и подключим необходимые для работы скрипты (скрипт jQuery, плагин keypad и таблицу стилей CSS).
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery1.3.1.js"></script>
<script type="text/javascript" src="jquerykeypad.js"></script>
<script type="text/javascript" src="jquery1.3.1.js"></script>
<script type="text/javascript" src="jquerykeypad.js"></script>
Шаг 2.
Между тегами вставим следующий код:
<script type="text/javascript">
$(function () {
$('#defaultKeypad').keypad();
});
</script>
$(function () {
$('#defaultKeypad').keypad();
});
</script>
Шаг 3.
В том месте, где мы хотим видеть поле с текстовой клавиатурой, вставим следующий код:
<input type="text" id="defaultKeypad">
То есть простому текстовому полю мы добавили идентификатор "defaultKeypad", который указали в шаге 2.
Готово! Попробуйте установить эту клавиатуру и на свой сайт!