本文介绍使用 bootstrap 的 input group 组件实现“固定国家代码 + 可编辑手机号”一体化输入框的方法，无需 javascript 即可完成视觉隔离与语义清晰的表单设计，并兼容移动端输入体验。
本文介绍使用 bootstrap 的 input group 组件实现“固定国家代码 + 可编辑手机号”一体化输入框的方法，无需 javascript 即可完成视觉隔离与语义清晰的表单设计，并兼容移动端输入体验。
在构建国际化表单时，常需确保用户输入的手机号始终以统一国家代码（如 +36）开头，同时避免用户误删或重复填写前缀。最简洁、语义明确且无障碍友好的方案是采用 HTML 原生结构 + CSS 布局控制，而非将国家代码拼接进 input 值中——后者会增加校验复杂度，且破坏 <input> 的纯净性与可访问性。
推荐使用 Bootstrap 4/5 的 input-group 模式（兼容性好、响应式强），结构如下：
<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 előhívószámot)
</label>
<div class="input-group mb-2">
<span class="input-group-text bg-white border-end-0 pe-3">+36</span>
<input
type="tel"
id="u_tel"
name="u_tel"
class="form-control"
value="{$user_data.u_tel}"
placeholder="701234567"
required
minlength="8"
maxlength="9"
aria-label="Magyarországi telefonszám, anélkül a +36 előhívószám nélkül"
>
</div>
<div class="help-block with-errors"></div>
</div>✅ 关键要点说明：
- 使用
<input type="tel">而非text，可触发移动设备数字键盘并提升语义化； - 国家代码
+36放在input-group-text中，视觉固定、不可编辑，但保留在标签流中，利于屏幕阅读器识别； -
aria-label明确说明“不含 +36”，避免辅助技术误读完整字段为“+36701234567”； - 移除原 placeholder 中冗余提示（如“Előhívószám és szóköz nélkül…”），改由结构本身传达规则；
- 通过
border-end-0 pe-3微调右侧边框与间距，使国家码与输入框视觉连贯不割裂。
⚠️ 注意事项：
- 后端接收时，应自动拼接
+36与用户输入的纯数字（如701234567→+36701234567），绝不依赖前端提交值； - 若需支持多国切换，建议升级为下拉选择
+36 / +49 / +44等，并动态更新input-group-text内容（配合 JS）； - 避免用
disabled或readonly属性锁定国家码区域——这会导致其无法被聚焦，影响键盘导航体验。
该方案轻量、标准、可维护，既满足设计图中“固定前缀”的视觉需求，又坚守表单最佳实践：结构清晰、语义准确、无障碍友好、前后端职责分明。
