如何创建带固定国家码的手机号输入框

方案一：固定不可编辑的国家码 #

将国家码（如+36）固定在输入框左侧，视觉上与输入框融为一体，用户仅需输入手机号主体部分，无需手动添加国家码。

代码实现 #

<div class="form-group">
    <label for="u_tel" class="control-label">Megrendelő telefonszáma:<sup>*</sup> (Kérjük NE tüntesse fel a +36/06 előhívószámot)</label>
    <!-- 用容器包裹国家码与输入框，实现视觉一体化 -->
    <div class="tel-input-group">
        <span class="country-code">+36</span>
        <input type="text" value="{$user_data.u_tel}" class="form-control tel-input" id="u_tel" name="u_tel" 
               placeholder="701234567" required data-required-error="Kérjük, adja meg a telefonszámát" 
               minlength="8" maxlength="9">
    </div>
    <div class="help-block with-errors"></div>
</div>

配套CSS样式：

.tel-input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.country-code {
    position: absolute;
    left: 12px;
    color: #6c757d;
    pointer-events: none; /* 禁止选中或点击国家码 */
}
.tel-input {
    padding-left: 45px; /* 为左侧国家码预留空间 */
}

方案二：自动添加国家码分隔符 #

通过JS监听输入事件，自动在手机号前插入国家码与分隔符，同时限制输入内容为数字，确保格式统一。

代码实现 #

<div class="form-group">
    <label for="u_tel" class="control-label">Megrendelő telefonszáma:<sup>*</sup></label>
    <input type="text" value="{$user_data.u_tel ? '+36 ' + $user_data.u_tel : ''}" class="form-control" id="u_tel" name="u_tel" 
           placeholder="+36 701234567" required data-required-error="Kérjük, adja meg a telefonszámát" 
           minlength="11" maxlength="12">
    <div class="help-block with-errors"></div>
</div>

配套JS逻辑：

const telInput = document.getElementById('u_tel');

telInput.addEventListener('input', function(e) {
    // 过滤非数字与+号的字符
    let value = this.value.replace(/[^+0-9]/g, '');
    // 强制开头为+36
    if (!value.startsWith('+36')) {
        value = '+36' + value.replace(/^\+?/, '');
    }
    // 在国家码后添加分隔空格
    if (value.length > 3) {
        value = value.slice(0, 3) + ' ' + value.slice(3);
    }
    // 限制总长度（+36 加9位手机号共12字符）
    if (value.length > 12) {
        value = value.slice(0, 12);
    }
    this.value = value;
});

// 初始化时格式化已有值
telInput.dispatchEvent(new Event('input'));

说明 #

• 方案一适合国家码固定、仅需用户输入手机号主体的场景，无需JS逻辑，兼容性好。
• 方案二适合需要完整显示带国家码手机号的场景，自动格式化输入内容，提升用户体验。

内容的提问来源于stack exchange，提问作者Rebeka Tóth