Ограничение ввода по маске


Хочу показать простой пример, как ограничить ввод символов по маске в текстовом поле, используя jQury и плагин Masked Input.

Плагин поддерживает следующие атрибуты:

a – разрешает ввод латинских символов (A-Z,a-z);
9 - разрешает ввод  только цифр (0-9);
* - разрешает ввод как символов, так и цифр (A-Z,a-z,0-9).

Жаль, плагин не поддерживает кириллицу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery img</title>
<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
$("#date2").mask("99/99/9999",{placeholder:"-"});
$("#phone2").mask("(999) 999-9999",{completed:function(){alert("Этого: "+this.val()+" достаточно!");}});
});
</script>
</head>

<body>

</body>
<input id="date" tabindex="1" type="text">
<input id="phone" tabindex="2" type="text">
<input id="date2" tabindex="3" type="text">
<input id="phone2" tabindex="4" type="text">

</html>

Для полноценной работы достаточно подгрузить библиотеку jQuery, строка 06, и сам плагин Masked Input, строка 07.

Затем при изменении содержимого поля ввода проверяется маска по его id, строка 10-13.

Если не нравится символ-заполнитель “_”, то можно указать свой, изменив аргумент  placeholder, как в строке 12 указан “-“. Также можно вызывать любую функцию по окончанию ввода по маске, строка 13. В данном примере вызывается alert(), а можно, например, отправить и ajax запрос на сервер с полученными данными… но это уже кому что надо.
Далее уже сами поля ввода, строки 21- 24.

Смотрим пример!

, ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 5, в среднем: 5.00 из 5)
Loading ... Loading ...


  1. #1 Romualdo - Сентябрь 5th, 2010 at 11:27

    Отличный плагин, тололько не могу понять, на локально на денвере все работает. Пытаюсь реализовать на сайте, неработает (точнее не работает в WordPress). Подскажите, пожалуйста, куда правильно размещать подключаемые скрипты?
    Заранее спасибо.

  2. #2 nice - Сентябрь 10th, 2010 at 09:47

    Проверте подключены ли скрипты, и хватает ли вашей версии jquery.

  3. #3 Daggett - Ноябрь 29th, 2010 at 01:27

    А возможно ли это использовать динамически?
    Т.е. надо добавить несколько дат. Кол-во не известно. Как это реализовать? Буду очень благодарен!

  4. #4 Ден - Апрель 13th, 2012 at 14:44

    Не работает ваша херня

  5. #5 Rogelio Morain - Сентябрь 23rd, 2012 at 20:11

    Thank you!… Greetings! I’ve just skimmed your thread and it was exactly what I was looking for. Thank you!…

  6. #6 remox - Август 2nd, 2013 at 11:19

    интересная штука) надо б допилить до поддержки кириллицbl
    + некоторblх символов)
    спасибо Вам)

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.