如何在form repeater中获取intl-tel-input带国家区号的完整号码

intl-tel-input自带的hiddenInput配置仅在组件初始化阶段，查找输入框所属的静态父表单生成固定绑定的隐藏域。form repeater动态插入的重复表单项属于初始化完成后新增的DOM节点，无法被原生hiddenInput逻辑识别，因此不会同步带区号的完整号码。

放弃依赖组件自带的hiddenInput配置，手动为每个手机号输入框（含动态新增项）绑定值同步逻辑，完全适配重复表单场景。

1. 改造PhoneDisplay初始化函数 #

初始化iti实例后，在当前输入框同级插入专属隐藏域，绑定事件实时同步带区号的完整号码：

function PhoneDisplay(input) {
    // 初始化intl-tel-input实例，移除原生hiddenInput配置
    const iti = window.intlTelInput(input, {
        onlyCountries: ["us","in", "uk","sg","ke","ae","gb","au","nz"],
        initialCountry: "auto",
        geoIpLookup: function(success, failure) {
            $.get("https://ipinfo.io/json?token=efe58ad6181234", function() {}, "jsonp").always(function(resp) {
                const countryCode = (resp && resp.country) ? resp.country : "";
                success(countryCode);
                // IP定位完成初始选中国家后，同步一次完整号码
                syncFullNumber();
            });
        },
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
    });

    // 为当前输入框创建专属隐藏域，和输入框同属一个重复区块，避免跨块字段冲突
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    // 隐藏域默认复用原输入框name，原可见输入框移除name，避免提交不带区号的裸号码
    hiddenInput.name = input.name;
    input.removeAttribute('name');
    input.after(hiddenInput);

    // 值同步方法：校验通过后将E164格式带区号完整号码写入隐藏域
    function syncFullNumber() {
        hiddenInput.value = iti.isValidNumber() ? iti.getNumber(intlTelInputUtils.numberFormat.E164) : '';
    }

    // 绑定触发同步的事件：手动输入号码、切换国家
    input.addEventListener('input', syncFullNumber);
    input.addEventListener('countrychange', syncFullNumber);

    // 将iti实例挂载到input节点上，方便后续销毁或外部调用
    input._itiInstance = iti;
}

2. 绑定form repeater生命周期回调 #

所有form repeater类组件都提供动态新增项的渲染回调，在新增项插入DOM后，找到块内的手机号输入框执行初始化即可，以通用的jQuery Repeater为例：

// 表单重复区块初始化
$('.your-repeater-wrapper').repeater({
    // 保留原有业务配置
    show: function () {
        // 原有新增项展示逻辑完成后，初始化当前块内的手机号输入框
        $(this).find('.phone-input').each(function() {
            PhoneDisplay(this);
        });
        $(this).slideDown();
    },
    // 可选：删除重复块时销毁iti实例，避免内存泄漏
    hide: function(deleteElement) {
        $(this).find('.phone-input').each(function() {
            if (this._itiInstance) this._itiInstance.destroy();
        });
        $(this).slideUp(deleteElement);
    }
});

// 页面首次加载时，初始化默认渲染的第一块表单内的手机号输入框
$(document).ready(function() {
    $('.phone-input').each(function() {
        PhoneDisplay(this);
    })
});

方案说明 #

• 每个动态新增的手机号输入框会在所属重复区块内生成独立隐藏域，默认复用原输入框的name属性；如果后端需要同步接收不带区号的裸号码，可自行给隐藏域name加自定义后缀（如${input.name}_with_code），不会出现跨块字段冲突，表单提交时会自动携带所有区块的号码数据
• 完全绕开intl-tel-input原生hiddenInput的静态表单绑定限制，适配任意动态插入的表单场景
• IP定位初始化完成、手动输入内容、切换国家三个时机都会实时同步值到隐藏域，不需要在表单提交节点额外遍历取值

内容的提问来源于stack exchange，提问作者madhav