Маска ввода для цифр на чистом JavaScript

Маска ввода для цифр на чистом JavaScript

Маска ввода для цифр на чистом JavaScript

Доброго времени суток! В данном примере я покажу Вам как можно создать
маску ввода для чисел на чистом JavaScript.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Input Mask</title>
</head>

<body>

    <input type="text" data-format="(***) ***-****" data-mask="(###) ###-####">

    <input type="text" data-format="**.**.****" data-mask="MM.DD.YYYY">

    <input type="text" data-format="+* (***) ***-**-**" data-mask="+* (***) ***-**-**" />

    <script>
        function doFormat(value, pattern, mask) 
        {
            // удаляем все нечисловые значения из значения
            const strippedValue = value.replace(/[^0-9]/g, "");

            // преобразуем строку-значение в массив символов
            const chars = strippedValue.split('');

            let count = 0;
            let formatted = '';

            // форматируем строку
            for (let i = 0; i < pattern.length; i++) 
            {
                const char = pattern[i];
                if (chars[count]) 
                {
                    if (/*/.test(char)) {
                        formatted += chars[count];
                        count++;
                    } else {
                        formatted += char;
                    }
                } 
                else if (mask) 
                {
                    const splittedMask = mask.split('');

                    if (splittedMask[i])
                    {
                        formatted += splittedMask[i];
                    } 
                }
            }

            return formatted;
        }

        // проходимся по каждому элементу назначая на них обработчики
        // нажатия клавиш
        document.querySelectorAll('[data-mask]').forEach(function (e) {

            function format(elem) {
                const val = doFormat(elem.value, elem.getAttribute('data-format'));
                elem.value = doFormat(elem.value, elem.getAttribute('data-format'), elem.getAttribute('data-mask'));

                if (elem.createTextRange) {
                    var range = elem.createTextRange();
                    range.move('character', val.length);
                    range.select();
                } else if (elem.selectionStart) {
                    elem.focus();
                    elem.setSelectionRange(val.length, val.length);
                }
            }

            e.addEventListener('keyup', function () {
                format(e);
            });

            e.addEventListener('keydown', function () {
                format(e);
            });

            format(e)
        });
    </script>
</body>

</html>


Источник