Современный формат телефона Bootstrap 5

Во многих сайта встречаются красивые и удобные форматы телефона. Например выбираешь из списка страну и формат в поле вводе меняется соответсвенно. Еще флаги стран с городами. Решил разобраться и поделиться как это делается для Веб страниц.

Использовал CDN - Bootstrap 5

<!-- Стили -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- Скрипты -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Контейнер элементы:

<div class="container">
    <div class="row mt-5">
        <div class="col-sm-6 mb-3 mb-sm-0">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Телефон</h5>
                    <div class="input-group mb-3 form-drop">
                        <button class="btn btn-outline-secondary dropdown-toggle js-form-drop-toggle js-dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="/images/flag/flag-ru.png" class="" alt=""/>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+7" checked="checked"/>
                                    <span class="form-drop__pic"><img src="/images/flag/flag-ru.png" alt=""/></span><span class="form-drop__text">Россия <span>+7</span></span>
                                </label>
                            </li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+375"/>
                                    <span class="form-drop__pic"><img src="/images/flag/flag-by.png" alt=""/></span><span class="form-drop__text">Беларусь <span>+375</span></span>
                                </label>
                            </li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+7"/>
                                    <span class="form-drop__pic"><img src="/images/flag/flag-kz.png" alt=""/></span><span class="form-drop__text">Казахстан <span>+7</span></span>
                                </label>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+996">
                                    <span class="form-drop__pic">
                                        <img src="/images/flag/flag-kg.png" alt="">
                                    </span>
                                    <span class="form-drop__text">Кыргызстан <span>+996</span></span>
                                </label>
                            </li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+998">
                                    <span class="form-drop__pic">
                                        <img src="/images/flag/flag-uz.png" alt="">
                                    </span>
                                    <span class="form-drop__text">Узбекистан <span>+998</span></span>
                                </label>
                            </li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+992">
                                    <span class="form-drop__pic">
                                        <img src="/images/flag/flag-tj.png" alt="">
                                    </span>
                                    <span class="form-drop__text">Таджикистан <span>+992</span></span>
                                </label>
                            </li>
                            <li>
                                <label class="dropdown-item d-flex align-items-center">
                                    <input type="radio" class="form-drop__control js-form-drop-control" name="code" value="+994"/>
                                    <span class="form-drop__pic"><img src="/images/flag/flag-az.png" alt=""/></span><span class="form-drop__text">Азербайджан <span>+994</span></span>
                                </label>
                            </li>
                        </ul>
                        <input type="text" class="form-control js-code-tel" aria-label="Text input with dropdown button">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CND Библиотека для маски телефона 

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

Стилистика для элемента dropdown-toggle

.js-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    height: 40px;
}

.js-form-drop-toggle img {
    max-width: 100%;
    max-height: 100%;
}

.dropdown-item input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-drop__pic {
    margin-right: 10px;
    width: 30px;
    display: flex;
}

.form-drop__pic img {
    max-width: 100%;
    max-height: 100%;
}

.form-drop__text {
    display: block;
    flex: 1;
    color: #000;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
}

.form-drop__text span {
    color: #B5BBC2;
}

.form-drop .dropdown-menu > li > label {
    cursor: pointer;
}

Javascript код:

let maskCodeTelArray = {};

function initMaskCode(e, t, n = 16) {
    let i = null;
    void 0 === e.dataset.tmpid ? (e.dataset.tmpid = Math.random().toString(36).substr(2, 9), maskCodeTelArray[e.dataset.tmpid] = {
        element: e,
        maskCode: null
    }, i = maskCodeTelArray[e.dataset.tmpid]) : i = maskCodeTelArray[e.dataset.tmpid], void 0 === e.dataset.minlength && e.setAttribute("minlength", n), i.maskCode && (i.maskCode.destroy(), i.maskCode = null), i.maskCode = "+7" === t ? new IMask(e, {
        mask: "+{7} 000 000-00-00",
        prepare: function (e, t) {
            return "8" === e && "" === t.value ? "" : e
        }
    }) : new IMask(e, {mask: `{${t}} 000 000-00-00`})
}

function setMaskOnTel(e, t = !0, n) {
    const i = e.value, r = e.parentNode, s = r.querySelector("img"), o = r.closest(".form-drop"),
        a = o.querySelector(".js-code-tel");
    console.log(s.getAttribute("src"));
    o.querySelector(".js-form-drop-toggle img").setAttribute("src", s.getAttribute("src"));
    const l = a.value.replace(/[^ ]+ /, "");
    a.value = i + " " + l, 2 === i.length ? initMaskCode(a, i, 16) : 4 === i.length ? initMaskCode(a, i, 18) : initMaskCode(a, i), t && a.focus()
}

function checkDefMaskPhone() {
    $(".js-form-drop-control:checked").each((function () {
        console.log("checkDefMaskPhone other", this), setMaskOnTel(this, !1, !0)
    }))
}

$(document).on("change", ".js-form-drop-control", (function () {
    setMaskOnTel(this)
}))

checkDefMaskPhone();