原理与目标
前缀、默认值与数据分离的核心概念
前缀与默认值的关系是实现好用户体验的关键。在输入场景中，前缀通常用于指示货币、地区代码或固定标识，而默认值则用于给用户一个可编辑的起点，避免重复输入。本文以HTML输入框设置默认值并禁止编辑前缀的实现方法：从原理到代码的完整教程为线索，分析如何在不干扰用户输入的前提下，确保前缀不可编辑，而可编辑部分保持灵活。
从原理角度讲，核心在于将前缀与可编辑文本进行清晰分离，并通过事件控制、光标定位与结构化布局来实现不可编辑的前缀。默认值通过 value 属性传递，前缀则通过额外的 DOM 元素或受控的光标逻辑呈现，这样既能保持数据一致性，也便于后续表单校验与提交处理。
输入事件、光标定位与可访问性要点
实现前缀不可编辑，必须处理光标位置、键盘事件和粘贴行为等交互细节。确保选择起点不落在前缀区域、防止删除前缀字符、以及在粘贴时对前缀进行保护，都是实现的关键要点。
在可访问性方面，建议通过aria-label、明确的前缀文本以及适当的对比度，确保屏幕阅读器能够正确解释前缀与可编辑文本的关系，从而提升无障碍性。
实现方法一：前缀作为独立元素的视觉前缀
结构设计与样式要点
第一种实现思路是将前缀放置为独立的 DOM 元素，放置在输入框前方或内部定位区域。这样前缀不会成为实际输入的一部分，输入框的值仅包含可编辑的文本，从而天然实现不可编辑的前缀效果。
结构设计需要清晰的容器、前缀文本和可编辑输入区域，并通过内边距（padding-left）将文本区向后移动，避免前缀遮挡输入内容。无论是在桌面端还是移动端，这种布局都具备良好的可控性与兼容性。
.input-prefix{ position: relative; display: inline-flex; align-items: center; }
.input-prefix .prefix{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #666; pointer-events: none; }
.input-prefix input{ padding-left: 40px; height: 38px; font-size: 14px; }
可访问性与键盘导航注意点
为了确保无障碍性，需要为前缀提供可读性提示，并确保输入框对屏幕阅读器友好。给前缀文本添加可隐藏的说明或使用 aria-hidden，以免干扰朗读，同时保持前缀的视觉指示作用。
键盘导航方面，前缀区域应被设计为静态文本，不响应焦点，输入框仍然能够按正常方式接收焦点与输入。此设计有助于避免非预期的光标跳转或文本修改。
实现方法二：通过光标控制实现不可编辑前缀
光标限制逻辑与事件驱动策略
第二种实现思路是将前缀直接嵌入输入值中，并通过光标控制来强制前缀不可编辑。通过设置前缀长度作为光标起始点的下限、并在键盘事件中阻止前缀区域的编辑，可以实现“可编辑部分后的文本编辑”效果。
实现时要处理多种输入方式：键盘输入、删除、粘贴等，以确保前缀始终保持不变，且可编辑文本保持连续性与可提交性。
.input-prefix-guard{ position: relative; display: inline-block; }
.input-prefix-guard .prefix{ position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #555; pointer-events: none; }
.input-prefix-guard input{ padding-left: 42px; }
// method 2: enforce不可编辑前缀
const input2 = document.getElementById('phone2');
const PREFIX = '+86 ';
input2.value = PREFIX + '1234567890'; // 设定默认值，前缀不可编辑function clampCaret() {if (input2.selectionStart < PREFIX.length) {input2.setSelectionRange(PREFIX.length, PREFIX.length);}
}
input2.addEventListener('keydown', (e) => {// 防止在前缀区域进行输入或删除if (input2.selectionStart < PREFIX.length) {e.preventDefault();input2.setSelectionRange(PREFIX.length, PREFIX.length);}if (e.key === 'Backspace' && input2.selectionStart <= PREFIX.length) {e.preventDefault();}
});
input2.addEventListener('click', clampCaret);
input2.addEventListener('paste', (e) => {// 粘贴时，确保不会修改前缀const pos = input2.selectionStart;if (pos < PREFIX.length) {e.preventDefault();input2.setSelectionRange(PREFIX.length, PREFIX.length);}
});
防粘贴与输入边界的处理要点
在实际应用中，粘贴操作可能跳过部分键盘事件，因此需要额外的粘贴拦截逻辑，确保粘贴的内容从前缀之后开始插入。将前缀区域设为不可编辑区、限制光标在前缀后的起点，可以提高鲁棒性与用户体验。
需要注意的是，直接将前缀写入 input 的 value 时，若提交表单时前缀被提交，后续校验也应剥离前缀，仅提交可编辑文本部分，避免服务端字段不一致的问题。
完整示例对比与实现要点
两种方案的对比要点
方案一以视觉前缀实现为主，前缀不进入输入值，简单且对无障碍友好，适合大多数场景；方案二通过直接对输入值进行控制实现不可编辑前缀，在需要将前缀与输入值合并、或进行特定格式化时更具灵活性，但实现细节稍复杂，需更严格的输入校验与边界处理。
在实现默认值方面，两种方式都支持通过 value 属性设置初始文本。若要在提交前进行格式统一，建议在表单提交事件中对前缀进行解析，提取可编辑文本进行服务端处理。
无论选择哪种方案，保持前缀的一致性、确保可编辑文本的可用性以及提供良好的无障碍支持，是实现高质量前缀输入体验的关键。
