本文介绍在 Angular 项目中，如何通过 onkeydown 事件精准控制数字输入框行为：禁止用户在负号后手动输入 0、字母或符号，防止删除负号，并拦截非法粘贴，确保输入始终为合法负数（如 -123，而非 -0123 或 -abc）。
本文介绍在 angular 项目中，如何通过 `onkeydown` 事件精准控制数字输入框行为：禁止用户在负号后手动输入 `0`、字母或符号，防止删除负号，并拦截非法粘贴，确保输入始终为合法负数（如 `-123`，而非 `-0123` 或 `-abc`）。
在金融类表单中，常需强制显示负值（如支出金额），但又不允许用户直接编辑符号位或输入前导零——例如，当当前值为 -900 时，若光标停在 - 后（即索引 1 处）并按下 0，应被拦截；同理，按 Backspace 删除负号、输入字母 a 或粘贴 "abc" 也必须拒绝。原方案使用 readonly + oninput + 正则替换存在根本缺陷：readonly 会完全禁用键盘输入，使 oninput 失效；而 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="," allownegativenumbers>
onkeydown="
const el = event.target;
const pos = el.selectionStart;
const key = event.key;
// 允许：数字、方向键、Backspace、Delete
const allowedKeys = /^([0-9]|Arrow(Down|Up|Left|Right)|Backspace|Delete)$/;
// 禁止：在负号后（pos===1）输入'0'，或在开头（pos===0）按Backspace删负号
const blockAtStart = (pos === 0 && key === 'Backspace') ||
([0,1].includes(pos) && key === '0');
if (!allowedKeys.test(key) || blockAtStart) {
event.preventDefault();
}
"
(paste)="onPaste($event)"
/>
<span matprefix class="alter-text-color">$</span>
</mat-form-field>
⚠️ 关键注意事项：
- 必须移除 readonly 属性：否则所有键盘事件均被浏览器忽略；
- [allowNegativeNumbers] 应禁用：该属性与自定义负号逻辑冲突，易导致双负号（如 --123）；
- 必须补充粘贴拦截：onkeydown 无法捕获粘贴行为，需额外处理：
onPaste(event: ClipboardEvent) {
event.preventDefault();
const pastedText = event.clipboardData?.getData('text') || '';
const cleaned = pastedText.replace(/[^0-9]/g, ''); // 仅保留数字
const value = cleaned ? `-${cleaned}` : '';
this.cashContribution = value;
// 手动触发变更检测（如需）
setTimeout(() => {
const input = event.target as HTMLInputElement;
input.value = value;
});
}
? 进阶建议：
若业务允许，更优雅的方式是视觉负号 + 只读数字区——用 CSS ::before 在输入框前渲染固定负号（content: '-'），输入框内仅接受纯正数（0-9），绑定值为 -numericValue。此举彻底规避符号操作问题，且符合无障碍标准（ARIA aria-label 可声明“负值金额”）。
最终目标不是“模拟负数输入”，而是“安全、可控、可访问地表达负值语义”。代码须兼顾实时性（keydown）、完整性（防粘贴）、健壮性（光标位置判断）与可维护性（逻辑分离）。
