Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2021, 15:27
Интересующийся
Отправить личное сообщение для romveld Посмотреть профиль Найти все сообщения от romveld
 
Регистрация: 20.10.2018
Сообщений: 13

Маска для телефона на JS
Ребята, привет! есть такой код:
<html lang="ru"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Маска ввода телефона в input на чистом JS</title>

</head>
<body>
    <div style="margin: 150px auto; max-width: 980px;" class="container">
        <h1>Phone Input Mask Plugin Demo</h1>
        <form>
            <div>
                <label>phone</label>
                <input type="tel" name="tel[]" class="masked-phone" data-phonemask="+38 (___) ___-____" />
            </div>
            <div>
                <label>phone</label>
                <input type="tel" name="tel[]" class="masked-phone" data-phonemask="+1 (___) __-___-___" />
            </div>
            <div>
                <label>phone</label>
                <input type="tel" name="tel[]" class="masked-phone" data-phonemask="+44 (___) ___-__-__" />
            </div>
            <div>
                <label>phone</label>
                <input type="tel" name="tel[]" class="masked-phone" data-phonemask="+456456 (_)_()__-_(_)()_-____" />
            </div>
            <div>
                <label>phone</label>
                <input type="tel" name="tel[]" class="masked-phone" />
            </div>
        </form>
        <div id="console">

        </div>
    </div>
</body>
<script type="text/javascript">
class PhoneField {

    constructor (a, b = '+7 (___) ___-__-__', c = '_') {
        this.handler = a,
        this.mask = b,
        this.placeholder = c,
        this.setLength(),
        this.setValue(),
        this.start = this.placeHolderPosition() - 1,
        this.handler.addEventListener('focusin', () => {this.focused()}),
        this.handler.addEventListener('keydown', d => {this.input(d)})
    }
	
    focused () {
        let a = this.placeHolderPosition();
        this.handler.selectionStart = a,
        this.handler.selectionEnd = a;
    }

    input (a) {
        if (this.isDirectionKey(a.key) || a.preventDefault(), this.isNum(a.key)) {
            this.changeChar(a.key);
        } else if (this.isDeletionKey(a.key)) {
            if ('Backspace' === a.key) {
                    let b = this.start;
                    this.changeChar(this.placeholder, -1, b)
                } else {
                    this.changeChar(this.placeholder)
            }      
        }
    }

    setLength () {
        this.handler.maxLength = this.mask.length;
    }

    setValue () {
        this.handler.value = this.mask;
    }

    isNum (a) {
        return !isNaN(a) && parseInt(+a) == a && !isNaN(parseInt(a, 10));     
    }

    isDeletionKey (a) {
        return 'Delete' === a || 'Backspace' === a;
    }

    isDirectionKey (a) {
        return 'ArrowUp' === a || 'ArrowDown' === a || 'ArrowRight' === a || 'ArrowLeft' === a || 'Tab' === a;
    }

    isPlaceholder (a) {
        return a == this.placeholder;
    }

    placeHolderPosition () {
        return this.handler.value.indexOf(this.placeholder);
    }

    changeChar (a, b = 1, c = this.mask.length) {
        let d = this.handler.value,
            f;
            f = 0 < b ? this.handler.selectionStart : this.handler.selectionStart - 1;
        let g = '';
        if (f === c) {
            return !1;
        }
        if (!this.isNum(d[f]) && !this.isPlaceholder(d[f])) {
            do {
                if (f += b, f === c) {
                    return !1;
                }
            } while (!this.isNum(d[f]) && !this.isPlaceholder(d[f]));
        }
        g = this.replaceAt(d, f, a),
        this.handler.value = g,
        0 < b && (f += b),
        this.handler.selectionStart = f,
        this.handler.selectionEnd = f
    }

    replaceAt (a, b, c) {
        return a.substring(0, b) + c + a.substring(++b);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    'use strict';
    let a = document.getElementsByClassName('masked-phone'),
        b = [];
        for (let c = 0; c < a.length; c++) {
            b.push(new PhoneField(a[c], a[c].dataset.phonemask, a[c].dataset.placeholder));
        }
});
</script>
</html>


Это маска телефона. Нужно блокировать возможность подсветки кода региона (+375 и т. п.). Если поставить фокус в скобки и пробовать стереть, он не будет пускать курсор на код региона, а если поставить фокус сразу на него, он будет меняться - https://prnt.sc/11g29h0. Нужно блокировать это изменение, как например, в маске Jquery. Не спрашивайте почему чистый JS, это за..б в голову, долго рассказывать. С помощью какой функции или какими средствами можно было бы это сделать, хоть какую информацию. Спасибо!

Последний раз редактировалось romveld, 15.04.2021 в 15:45. Причина: Уточнение сообщения
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как писать, дебажить JS для FireFox bookmarklet DeeZ Оффтопик 2 01.10.2017 20:37
Подправить JS скрипт для Greasemonkey trambalimpum Работа 1 26.07.2017 03:10
Как заставить JS обрабатывать функции для всех блоков с заданным классом? GTX14 Общие вопросы Javascript 1 04.04.2015 16:12
Не запускается JS событие для формы dikucher Events/DOM/Window 6 26.11.2013 00:29
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 21:18