本文介绍如何在 angular 的 material 输入框中显示不可删除的默认前缀（如“####”），同时允许用户在其后自由输入和编辑内容，通过 css 定位与内边距配合实现视觉与交互分离。
本文介绍如何在 angular 的 material 输入框中显示不可删除的默认前缀（如“####”），同时允许用户在其后自由输入和编辑内容，通过 css 定位与内边距配合实现视觉与交互分离。
在 Angular 应用中，常需为输入框设置一个固定前缀（例如系统生成的标识符、编码模板等），该前缀应始终可见且不可被用户删除，但用户可在其后追加或修改自定义内容（如 ####123456 → 允许删减 123456，但 #### 始终保留）。原生 <input> 不支持“只读前缀”，而直接设 readonly 或 disabled 会禁用全部输入，不符合需求。
推荐方案是视觉模拟前缀 + 逻辑隔离：将前缀作为独立 <span> 绝对定位在输入框左侧，同时为 matInput 设置 padding-left 确保用户输入内容不覆盖前缀区域。这样既保持 DOM 结构清晰，又避免复杂的键盘事件拦截（如阻止 Backspace 删除前缀），提升可维护性与可访问性。
✅ 实现步骤
- HTML 结构：在 mat-form-field 内添加带 class="prefix" 的 <span> 作为前缀容器，并确保 matInput 位于其后
- CSS 样式：通过绝对定位固定前缀位置，并为输入框预留左侧内边距
- 状态适配：当表单聚焦时，微调前缀垂直位置以匹配浮动标签高度
<mat-form-field appearance="outline" class="col-30 placeholder-prefix" id="mat-identifier">
<span class="prefix">{{ selectedIdentifier?.standardIdentifier || '####' }}</span>
<mat-label>
{{ 'columns.dashboard.identifier' | translate }}
{{ selectedIdentifier?.mandatorieIdentifier ? '*' : '' }}
</mat-label>
<input
matInput
formControlName="identifier"
maxlength="255"
(input)="limitcarateres('identifier', 255, $event)"
/>
<mat-hint *ngIf="showPackage !== true && selectedIdentifier && selectedIdentifier?.tag !== 'OTHERS'">
{{ selectedIdentifier?.standardIdentifier }}{{
dataCorrespondenceForm.get('identifier').value
? '-' + dataCorrespondenceForm.get('identifier').value
: ''
}}
</mat-hint>
</mat-form-field>.placeholder-prefix {
.mat-mdc-form-field-input-control {
padding-left: 50px; // 为前缀留出空间，需根据实际宽度调整
}
.prefix {
position: absolute;
left: 12px; // 与 input padding-left 对齐（建议略小 2–5px）
top: 29px; // 未聚焦时 label 未上浮的高度
font-size: 14px;
color: #757575;
pointer-events: none; // 确保不干扰输入焦点
}
.mat-focused & .prefix {
top: 24px; // 聚焦后 label 上浮，前缀同步上移保持对齐
}
.mat-mdc-form-field-infix {
display: flex;
}
}⚠️ 注意事项
- 前缀内容动态绑定：使用 {{ selectedIdentifier?.standardIdentifier || '####' }} 确保空值时有合理回退
- 无障碍支持：添加 aria-hidden="true" 到 .prefix（若前缀无语义信息），或通过 aria-labelledby 显式关联说明
- 响应式适配：left 和 top 值需结合 mat-form-field 主题（如 legacy/standard/fill）微调；建议用 rem 或 em 替代 px 提升缩放兼容性
- 不要用 disabled 或 readonly：二者均会阻止所有输入，违背“用户可编辑后缀”的核心需求
- 验证逻辑独立处理：表单校验应仅针对 formControlName="identifier" 的值（即用户输入部分），前缀不参与校验
此方案轻量、稳定、符合 Angular Material 设计规范，无需监听 keydown 或操作 selectionStart，规避了光标错位、粘贴异常等边界问题，是生产环境推荐的最佳实践。
