使用 JavaScript 和 jQuery 为多个输入字段附加国家代码的教程

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/css/intlTelInput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-row">
    <!-- SMS 电话号码输入框 -->
    <div class="form-group col-md-6 smsForm">
        <label for="smsno">SMS No.</label>
        <input type="tel" class="form-control" name="smsno" id="smsno" placeholder="Type contact1 number here...." pattern="[7-9]{1}[0-9]{9}" required />
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Please enter valid contact no.</div>
    </div>
    <!-- WhatsApp 电话号码输入框 -->
    <div class="form-group col-md-6 whatsappForm">
        <label for="whtspno">WhatsApp No.</label>
        <input type="text" class="form-control" name="whtspno" id="whtspno" placeholder="Type contact2 number here...." pattern="[7-9]{1}[0-9]{9}" required />
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Please enter valid contact no.</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.17/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

<script>
    // 页面加载完成后的事件监听器，用于表单验证（可选，但通常与表单集成）
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);

    // 获取电话号码输入框元素
    const phoneInputField = document.querySelector("#smsno");
    const phoneInputField2 = document.querySelector("#whtspno");

    // 初始化 intlTelInput 实例
    // 注意：这里仅初始化，不包含额外的配置，如有需要可在此处添加配置对象
    const phoneInput = window.intlTelInput(phoneInputField, {});
    const phoneInput2 = window.intlTelInput(phoneInputField2, {});

    // jQuery 文档就绪函数
    $(document).ready(function() {
        // 为 SMS 电话号码输入框的国旗容器添加点击事件监听
        // 使用 .smsForm 类作为限定符，确保只选择该容器内的国旗
        $('.smsForm .iti__flag-container').click(function() {
            // 获取当前选中国旗的 title 属性，其中包含国家代码
            var countryCode = $('.smsForm .iti__selected-flag').attr('title');
            // 从 title 中提取纯数字的国家代码
            countryCode = countryCode.replace(/[^0-9]/g, '');
            // 清空输入框并设置新的带国家代码的值
            $('#smsno').val(""); // 先清空，确保国家代码在最前面
            $('#smsno').val("+" + countryCode + " " + $('#smsno').val());
        });

        // 为 WhatsApp 电话号码输入框的国旗容器添加点击事件监听
        // 使用 .whatsappForm 类作为限定符，确保只选择该容器内的国旗
        $('.whatsappForm .iti__flag-container').click(function() {
            // 获取当前选中国旗的 title 属性
            var countryCode = $('.whatsappForm .iti__selected-flag').attr('title');
            // 从 title 中提取纯数字的国家代码
            countryCode = countryCode.replace(/[^0-9]/g, '');
            // 清空输入框并设置新的带国家代码的值
            $('#whtspno').val(""); // 先清空
            $('#whtspno').val("+" + countryCode + " " + $('#whtspno').val());
        });
    });
</script>