Маска ввода номера телефона на чистом js
Пример скрипта ввода номера телефона с использованием маски на javascript.
Маска ввода номера телефона на чистом js

Маска ввода номера телефона на чистом js

Привет кодеры. 

Очень часто на сайтах необходимо проконтролировать, что ввел пользователь в поле input. Сегодня я покажу один из вариантов скрипта, который создает некое ограничение на ввод данных в поле, аля - маска ввода номера телефона. 


Да есть плагины для jQuery, но сегодня не о нем. Много сайтов существует без него, но маска необходима всем, поэтому сегодня скрипт на чистом js и без лишних библиотек... и так поехали...

И так задача:

  • скрипт должен работать без лишних библиотек
  • должен быть  максимально гибким
  • легко подключаемым.

Срипт маски ввода телефона

    document.addEventListener("DOMContentLoaded", function () {

        var eventCalllback = function (e) {

            var el = e.target,
            clearVal = el.dataset.phoneClear,
            pattern = el.dataset.phonePattern,
            matrix_def = "+7(___) ___-__-__",
            matrix = pattern ? pattern : matrix_def,
            i = 0,
            def = matrix.replace(/\D/g, ""),
            val = e.target.value.replace(/\D/g, "");
            
            if (clearVal !== 'false' && e.type === 'blur') {
                if (val.length < matrix.match(/([\_\d])/g).length) {
                    e.target.value = '';
                    return;
                }
            }
            if (def.length >= val.length) val = def;
            e.target.value = matrix.replace(/./g, function (a) {
                return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
            });
        }

        var phone_inputs = document.querySelectorAll('[data-phone-pattern]');
        for (let elem of phone_inputs) {
            for (let ev of ['input', 'blur', 'focus']) {
                elem.addEventListener(ev, eventCalllback);
            }
        }
    });

Можно его сжать и получится вот так

var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}};$jscomp.arrayIterator=function(a){return{next:$jscomp.arrayIteratorImpl(a)}};$jscomp.makeIterator=function(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):$jscomp.arrayIterator(a)};
document.addEventListener("DOMContentLoaded",function(){var a=function(e){var c=e.target,n=c.dataset.phoneClear;c=(c=c.dataset.phonePattern)?c:"+7(___) ___-__-__";var g=0,k=c.replace(/\D/g,""),d=e.target.value.replace(/\D/g,"");"false"!==n&&"blur"===e.type&&d.length<c.match(/([_\d])/g).length?e.target.value="":(k.length>=d.length&&(d=k),e.target.value=c.replace(/./g,function(l){return/[_\d]/.test(l)&&g<d.length?d.charAt(g++):g>=d.length?"":l}))},b=document.querySelectorAll("[data-phone-pattern]");
b=$jscomp.makeIterator(b);for(var f=b.next();!f.done;f=b.next()){f=f.value;for(var m=$jscomp.makeIterator(["input","blur","focus"]),h=m.next();!h.done;h=m.next())f.addEventListener(h.value,a)}});

Скрипт подключаем как обычно. Или вставляем сам код между тегами <script>[тут код]</script>, ну или создаем js файл вставляем код в него и подключаем уже сам файл.

Как использовать

Ну теперь давайте глянем как его задействовать.

Скрипт работает с атрибутами элемента input, т.е. для того, чтобы скрипт применил маску к инпуту ввода номера телефона, вам необходимо прописать data атрибут.

data-phone-pattern  - подключает маску к input 
data-phone-pattern = '+7 (___) ___-__-__'  - Задает свою маску для номера телефона.
data-phone-clear = 'false' - отключает сброс значения Input , если пользователь не до конца ввел телефон.

В самом скрипте, уже имеется дефолтная маска вида: '+7 (___) ___-__-__'. Если вам необходим другой вид, то указываем свою в атрибуте data-phone-pattern.

Скрипт автоматически стирает некорректно введеный номер телефона в поле, при потере фокуса.

data-phone-clear = "false" - указывает скрипту, что не надо стирать данные в поле input, даже если пользователь ввел телефон не полностью. (Не знаю зачем это надо, но мало ли).  

Пример использование атрибутов:

//Простое подключение скрипта
<input type="text" name="" data-phone-pattern>

//Подключение скрипта со своей маской
<input type="text" name="" data-phone-pattern = "+7 (___) ___-__-__">

//Подключение скрипта со своей маской и отключением стирания
<input type="text" name="" data-phone-pattern 'data-phone-clear = "false" >

Теперь единственное, что необходимо сделать, это очистить данные от мусора на стороне сервера. Так как в поле телефона присутствуют не очень нужные символы (типа скобок и прочерков, пробелов), то когда вы принимаете POST данные в скрипте php, можно применить функцию замены ненужных символов.

К примеру, у нас имя поля input было phone

//Входящие данные от формы POST

// пришло + 7(929) 7896-56-56
$phone = $_POST['phone'];

// чистим
$phone = str_replace(['(',')','-','+',' '], '', $phone );

// на выходе
$phone будет равен 792978965656

 

Ну вот и все... пока.. пока..


Поделитесь с друзьями: