Данный плагин нужен для создания маски в инпуте. Я использую его для создания маски телефона. Кто не знает что такое маска — это, можно сказать, специально сделанное поле в инпуте, по которому мы вводим данные, и отойти от него не получится. То есть, если маска +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(_»
Немного доработки, чтобы когда начали вводить номер и чтобы курсор опять в начале не был
$(‘input[type=»tel»]’).click(function(){
var val = $(this).val();
if(val == »)
{
$(this).setCursorPosition(3); // set position number
}
});
Спасибо! Рабочее решение! Такой серьёзный плагин, а работает не серьёзно)
Это делается очень просто, смотри, после +7 у тебя появляется _____. И из-за нее курсор ставится в конце. Мы просто уберем нижнее подчеркивание и курсор всегда будет попадать после +7 и к тому же, с возможностью редактировать номер без стирания 🙂
jQuery(function($){
$(«#pop_phone»).mask(«+7(999) 999-9999», {placeholder: «» });
});