本文介绍在 Angular 应用中，针对只读但需支持负值显示的货币输入框，如何通过 onkeydown 拦截 + 光标位置判断，精准禁止用户在负号后输入 0、字母或符号，同时保留数字、删除与导航键功能。
本文介绍在 angular 应用中，针对只读但需支持负值显示的货币输入框，如何通过 `onkeydown` 拦截 + 光标位置判断，精准禁止用户在负号后输入 `0`、字母或符号，同时保留数字、删除与导航键功能。
在金融类表单中，常需将用户输入自动转为负值（如“支出”金额），但又不允许用户手动编辑负号或在 - 后输入非法内容（如 -0123、-a5、-0）。原代码存在两个关键问题：一是 设置了 readonly，导致 oninput 事件无法响应键盘输入；二是 onInput() 方法逻辑混乱，既未处理光标位置，也无法拦截粘贴（paste）等绕过行为。
推荐方案：使用 onkeydown 精准拦截 + 光标位置感知
将 oninput 替换为 onkeydown，并在内联事件处理器中基于当前光标位置（selectionStart）和按键类型做细粒度控制：
<input matinput class="alter-text-color" mask="separator.0" thousandseparator=",">
onkeydown="if (!(/^[0-9]$|Arrow(Down|Up|Left|Right)|Backspace|Delete/.test(event.key)) ||
([0,1].includes(event.target.selectionStart) && event.key === '0') ||
(event.target.selectionStart === 1 && event.key === 'Backspace')) {
event.preventDefault();
}"
(input)="onInput($event)"
/>
✅ 关键逻辑说明：
- ✅ 仅允许安全按键：数字 0–9、方向键、Backspace、Delete；其余（字母、Enter、Tab、符号等）一律拦截。
- ✅ 禁止 -0 场景：当光标位于第 0 位（开头）或第 1 位（负号后）时，按 0 键被阻止 → 防止输入 -0xxx 或 0xxx。
- ✅ 锁定负号不可删：当光标恰在第 1 位（即 -|123 中的 | 位置），按 Backspace 会尝试删除负号，此时拦截 → 负号始终保留。
- ❌ 注意：此方案不拦截粘贴。如需完全防护，应额外监听 (paste) 事件并调用 event.preventDefault()，再通过 setTimeout 同步校验剪贴板内容。
进阶建议（非必须但更健壮）：
- 移除 readonly，改用 CSS 视觉禁用（如 pointer-events: none; opacity: 0.7;）+ 逻辑层拦截，兼顾可访问性与交互反馈。
- 将负号交由 UI 层渲染（如 ::before 伪元素添加 -），输入框内仅维护绝对值，彻底解耦数据与展示。
- 在 onInput() 中仅做格式清洗（如移除逗号、校验纯数字），数值符号转换应在提交前统一处理，避免实时双向绑定干扰。
最终效果：用户可见 -900，可正常修改为 -950 或 -800，但无法输入 -0900、无法删除 -、无法粘贴 abc 或 -0abc —— 合规、直观、可控。
