Хаки и Скрипты Next Generation CMS : JS, Интерфейс, Текст и ссылки : Форматирование телефона,даты....

irbees2008 Опубликовано - 30 - августа JS

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

На форуме был задан вопросик насчет форматирования телефонных номеров, вопрос легко решается с помощью гугла. Я вот нашел скрипт maskedinput.js.

Цитата:
Рекомендуемый формат написания номеров телефонов:
мобильных: +7 123 123‒45‒67,
городских:
если возможны звонки из-за рубежа: +7 (123) 123‒45‒67 (рекомендуется);
если точно не планируется звонков из-за рубежа: (123) 123‒45‒67;
если ожидаются только местные звонки: 123‒45‒67

И так приступим
Скачать архив со скриптом Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковать и залить один из вариантов скрипта в папку JS вашего шаблона.
Подключаем файлы jquery и maskedinput в файл main.tpl.

Код:

<script src="{{ tpl_url }}/js/jquery.js"></script>
<script src="{{ tpl_url }}/js/jquery.maskedinput.js" ></script>

Конечно если jquery уже подключен то второй раз подключать не надо
Затем вызываем функцию маски для тех элементов, которые вы хотите замаскировать.

Код:

jQuery(function($){
   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
   $("#phone").mask("+3(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

То есть ваше поле с телефоном должно иметь id , в данном варианте поле выглядит так

Код:

<input tape="text" id="phone" placeholder="+3(___) ___-____">

Пример:

Заполните ваш телефонный номер :
И так далее .
Если вы не удовлетворены символом подчеркивания ('_') в качестве заполнителя, вы можете передать необязательный аргумент методу maskedinput.

Код:

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Если вы хотите выполнить функцию после завершения маски, вы можете указать эту функцию как необязательный аргумент для метода maskedinput.

Код:

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

Также вы можете предоставить свои собственные определения маски.

Код:

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Все, что указано после '?' считается необязательным . Общим примером для этого является номер телефона + дополнительное расширение.

Код:

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

Если ваши требования не удовлетворяются предопределенными заполнителями, вы всегда можете добавить свои собственные. Например, возможно, вам нужна маска, чтобы разрешать только шестнадцатеричные символы. Вы можете добавить свое собственное определение для заполнителя, например «h», например:

Код:

$ .mask.definitions ['h'] = '[A-Fa-f0-9]';

Затем вы можете использовать цвет css для маскировки

Код:

jQuery(function($){
   $("#phone").mask("#hhhhhh");
});

Теперь о масках символов:
a — Все алфавитные значения (A-Z,a-z)
9 — Все цифровые значения (0-9)
* — Любые алфавитно-цифровые значения (A-Z,a-z,0-9)

Ну с этим вроде все.

Можешь почитать и вот эту статейку "Выводим блок по времени на TWIG"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.