Данный плагин нужен для создания маски в инпуте. Я использую его для создания маски телефона. Кто не знает что такое маска — это, можно сказать, специально сделанное поле в инпуте, по которому мы вводим данные, и отойти от него не получится. То есть, если маска +7(___)__-__-__, то начать ввод телефона с +38095 вы уже не сможете.
И так, как работает плагин? Подключаете его (и библиотеку jQuery) сперва в верстку.
|
1 2 3 4 5 6 7 8 9 10 |
<script src="libs/jquery/jquery-2.1.3.min.js"></script> <script src="libs/jquery.maskedinput.min.js"></script> <script> var telInp = $('input[type="tel"]'); telInp.each(function(){ $(this).mask("+7(999) 999-99-99"); }); </script> |
Здесь мы проходим по всем инпутам с типом tel на сайте и везде проводим инициализацию. Все просто.
В сущности, никакие другие функции данного плагина мне больше не пригодились, однако вы их можете найти в оф. документации.
Однако одна проблема возникла, и ее пришлось решать дополнительным скриптом. Это проблема курсора, т.к. по умолчанию если нажать на инпут с работающей маской, курсор попадет вконец маски. Чтобы сделать его вначале маски при нажатии — пришлось писать скрипт.
|
1 2 3 4 5 6 7 8 9 10 11 |
$.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }; |
и затем:
|
1 2 3 |
$('input[type="tel"]').click(function(){ $(this).setCursorPosition(3); // set position number }); |
запуск с 3 позиции, нумерация идет с 0. «+7(_»