本文介绍在 Angular 应用中，如何通过键盘事件拦截与输入校验，严格限制用户在负号后输入 0、字母或特殊字符，并禁止手动删除负号，确保金额输入始终为合法的负整数（如 -900），同时兼容光标定位、方向键、退格等正常编辑行为。
本文介绍在 angular 应用中，如何通过键盘事件拦截与输入校验，严格限制用户在负号后输入 0、字母或特殊字符，并禁止手动删除负号，确保金额输入始终为合法的负整数（如 `-900`），同时兼容光标定位、方向键、退格等正常编辑行为。
在构建金融类表单（如付款金额输入）时，常需实现「自动取负」逻辑：用户仅输入正数，系统自动展示为负值（如输入 900 → 显示 -900），但禁止用户手动操作负号——既不能在 - 后输入 0（如 -0900），也不能删掉 -，更不能输入字母、符号等非法字符。原方案使用 readonly + oninput + 正则替换，存在根本性缺陷：readonly 会完全禁用所有用户输入，使功能失效；而 onInput 在值已变更后才触发，无法实时拦截非法按键。
✅ 正确解法是 改用 onkeydown 进行前置拦截，结合光标位置（selectionStart）精准判断用户意图：
<mat-form-field appearance="fill" class="deal-form-date-picker opacity87" hascashcontribution="==" style="padding-right: 16px;"><mat-label hascashcontribution="==">Payment</mat-label><input matinput class="alter-text-color" mask="separator.0" thousandseparator="," onkeydown="
const el = event.target;
const pos = el.selectionStart;
// 允许：数字、方向键、Backspace、Delete
if (!/^[0-9]$/.test(event.key) &&
!/^Arrow(Down|Up|Left|Right)$/.test(event.key) &&
event.key !== 'Backspace' &&
event.key !== 'Delete') {
event.preventDefault();
return;
}
// 禁止在负号后（位置 1）输入 '0'
if (pos === 1 && event.key === '0') {
event.preventDefault();
return;
}
// 禁止在开头（位置 0）按 Backspace 删除负号
if (pos === 0 && event.key === 'Backspace') {
event.preventDefault();
}
"><span matprefix class="alter-text-color">$</span>
</mat-form-field>
⚠️ 关键逻辑说明：
- selectionStart === 1 表示光标紧邻负号右侧（即 -|900），此时按 0 直接拦截；
- selectionStart === 0 且按 Backspace 时，光标在最左，防止删除 -；
- 显式放行方向键（Arrow*）、Backspace、Delete 和数字，保障可编辑性；
- 所有非数字键（如 a、Enter、Tab）均被拦截，杜绝粘贴以外的非法输入。
? 进阶建议（强烈推荐）：
- 移除 readonly 属性：它与交互需求矛盾，应通过逻辑控制而非禁用输入；
- 禁用粘贴风险：补充 (paste)="onPaste($event)" 并在方法中调用 event.preventDefault()，或对粘贴内容做严格清洗；
- 视觉负号优于逻辑负号：如答案所提，更优雅的方式是不将负号存入 ngModel，而是用 CSS ::before 伪元素显示 -，ngModel 始终保存绝对值（如 900），业务层再统一取负。这彻底规避负号操作问题；
- 移除 [allowNegativeNumbers]：该属性与「禁止手动输负号」目标冲突，应由组件逻辑统一管控。
? 总结：输入控制的核心在于「时机前置」（keydown > input）与「上下文感知」（光标位置 + 当前值）。避免在值已污染后再修正，而应在按键瞬间决定是否允许——这才是健壮表单体验的基石。
