Маска ввода телефона в input на чистом JS

Различные маски ввода при помощи Imask

Imask.js — это легковесная и мощная библиотека для работы с масками ввода. Она поддерживает различные типы масок, такие как числа, строки, даты, регулярные выражения и даже динамические маски. Imask обеспечивает гибкость и простоту использования, благодаря чему она широко используется в веб-разработке.

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

1. Легко интегрируется в проект, минимальные настройки.
2. Поддержка множества типов масок.
3. Импорт библиотеки не требует большого объема ресурсов.
4. Корректно работает во всех современных браузерах.

Установка Imask

Для начала нужно установить библиотеку Imask. Это можно сделать через пакетный менеджер npm или yarn:

npm install imask

Также можно подключить библиотеку через CDN:

<script src="https://unpkg.com/imask"></script>

После этого мы можем приступить к настройке масок для различных типов ввода.

Маска для ввода телефона

Самый частый случай использования масок — это ввод номера телефона. Давайте создадим маску для номера телефона с российским форматом +7 (___) ___-__-__.

Пример HTML-кода для поля ввода телефона:

<input type="tel" id="phone" placeholder="Ваш телефон">

Пример JavaScript-кода с использованием Imask для телефона:

var phoneInput = document.getElementById('phone');
var phoneMask = IMask(phoneInput, {
    mask: '+{7} (000) 000-00-00'
});

Здесь mask: '+{7} (000) 000-00-00' — это маска, где 0 обозначает, что пользователь может ввести только цифры. Символы +, пробелы, скобки и дефисы добавляются автоматически. В итоге пользователь видит удобный интерфейс для ввода номера телефона, где система контролирует правильность ввода.

Маска для ввода электронной почты

Хотя маска для электронной почты может показаться сложной, Imask позволяет гибко настраивать правила валидации через регулярные выражения. Для электронной почты чаще всего используется формат вида name@domain.com.

Пример HTML-кода для поля ввода email:

<input type="email" id="email" placeholder="Ваш email">

Пример JavaScript-кода для настройки маски email:

var emailInput = document.getElementById('email');
var emailMask = IMask(emailInput, {
    mask: /^\S*@?\S*$/
});

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

Маска для ввода даты

Дата — еще один важный тип данных, для которого часто требуется маска. Например, для даты можно использовать формат DD/MM/YYYY.

Пример HTML-кода для поля ввода даты:

<input type="text" id="date" placeholder="Дата рождения">

Пример JavaScript-кода для настройки маски даты:

var dateInput = document.getElementById('date');
var dateMask = IMask(dateInput, {
    mask: Date,
    pattern: 'd{.}`m{.}`Y',  // Маска для формата даты
    lazy: false,  // Показать символы маски сразу
    blocks: {
        d: { mask: IMask.MaskedRange, from: 1, to: 31, maxLength: 2 },
        m: { mask: IMask.MaskedRange, from: 1, to: 12, maxLength: 2 },
        Y: { mask: IMask.MaskedRange, from: 1900, to: 2099, maxLength: 4 }
    }
});

В этом примере мы используем маску для даты с диапазонами значений для дня, месяца и года. Это позволяет контролировать, чтобы введенные значения не выходили за пределы допустимого диапазона.

Маска для ввода номера банковской карты

Для ввода номеров банковских карт можно использовать маску вида 0000 0000 0000 0000. Рассмотрим пример настройки такой маски.

Пример HTML-кода для поля ввода карты:

<input type="text" id="card" placeholder="Номер карты">

Пример JavaScript-кода для настройки маски карты:

var cardInput = document.getElementById('card');
var cardMask = IMask(cardInput, {
    mask: '0000 0000 0000 0000'
});

Эта маска позволяет вводить только цифры, разделенные на блоки по 4 цифры для удобства ввода и чтения.

Небольшие выводы по библиотеке и Demo

Библиотека Imask.js предоставляет простой и мощный способ добавления масок ввода к вашим формам. Она поддерживает множество типов данных и масок, а также легко настраивается под любые нужды проекта.

Если вы любите хардкор и не хотите использовать библиотеки или вас чем то не устраивает сама маска, тогда альтернативное решение чисто для маски ввода телефона, которое использую я (вес всего 3,5 кб), ниже.

Маска ввода телефона без доп. библиотек и зависимостей

Вот вам решение которое использую я, смотрите демо, чтобы посмотреть как оно работает.

HTML разметка

Любой input у которого есть класс tel, например:

<input value="" class="tel">

JS код маски

Не забудьте заключить его в: <script> код </script>:

document.addEventListener("DOMContentLoaded", function () {
    var phoneInputs = document.querySelectorAll('input.tel');

    var getInputNumbersValue = function (input) {
        // Возвращаем только цифры из введенного значения
        return input.value.replace(/\D/g, '');
    }

    var onPhonePaste = function (e) {
        var input = e.target,
            inputNumbersValue = getInputNumbersValue(input);
        var pasted = e.clipboardData || window.clipboardData;
        if (pasted) {
            var pastedText = pasted.getData('Text');
            if (/\D/g.test(pastedText)) {
                // При вставке некорректного символа оставляем только цифры
                input.value = inputNumbersValue;
                return;
            }
        }
    }

    var onPhoneInput = function (e) {
        var input = e.target,
            inputNumbersValue = getInputNumbersValue(input),
            selectionStart = input.selectionStart,
            formattedInputValue = "";

        if (!inputNumbersValue) {
            return input.value = "";
        }

        if (input.value.length != selectionStart) {
            // Если редактируем не в конце поля
            if (e.data && /\D/g.test(e.data)) {
                // Если вводим не числовой символ
                input.value = inputNumbersValue;
            }
            return;
        }

        if (["7", "8", "9"].indexOf(inputNumbersValue[0]) > -1) {
            if (inputNumbersValue[0] == "9") inputNumbersValue = "7" + inputNumbersValue;
            var firstSymbols = (inputNumbersValue[0] == "8") ? "8" : "+7";
            formattedInputValue = input.value = firstSymbols + " ";
            if (inputNumbersValue.length > 1) {
                formattedInputValue += '(' + inputNumbersValue.substring(1, 4);
            }
            if (inputNumbersValue.length >= 5) {
                formattedInputValue += ') ' + inputNumbersValue.substring(4, 7);
            }
            if (inputNumbersValue.length >= 8) {
                formattedInputValue += '-' + inputNumbersValue.substring(7, 9);
            }
            if (inputNumbersValue.length >= 10) {
                formattedInputValue += '-' + inputNumbersValue.substring(9, 11);
            }
        } else {
            formattedInputValue = '+' + inputNumbersValue.substring(0, 16);
        }
        input.value = formattedInputValue;
    }

    var onPhoneKeyDown = function (e) {
        // Удаление последнего символа очищает поле
        var inputValue = e.target.value.replace(/\D/g, '');
        if (e.keyCode == 8 && inputValue.length == 1) {
            e.target.value = "";
        }
    }

    var onPhoneFocus = function (e) {
        var input = e.target;
        if (input.value === "") {
            input.value = "+7 "; // Устанавливаем начальное значение
            input.setSelectionRange(3, 3); // Устанавливаем курсор после +7
        }
    }

    for (var phoneInput of phoneInputs) {
        phoneInput.addEventListener('keydown', onPhoneKeyDown);
        phoneInput.addEventListener('input', onPhoneInput, false);
        phoneInput.addEventListener('paste', onPhonePaste, false);
        phoneInput.addEventListener('focus', onPhoneFocus); // Добавляем обработчик focus
    }
});

История изменений:

1. Код переписан полностью

Заключение

В данной статье мы рассмотрели создание масок для ввода телефона, электронной почты, даты и номера банковской карты. Эти примеры помогут вам начать использование масок и улучшить взаимодействие пользователей с вашими веб-формами.

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