PrimeNG中KeyPress事件无法触发？附jQuery可运行代码对比求助

PrimeNG代码片段（无法运行） #

app.component.html #

<div class="p-field p-float-label">
    <input pInputText id="weight" name="weight" maxlength="10" [(ngModel)]="data.weight" (onkeypress)="isValidWeight($event)" />
    <label for="float-input">Weight (Kg) 0.5 - 500</label>
</div>

app.component.ts #

isValidWeight(event): void {
    const key = event.keyCode;
    if ((key >= 48 && key <= 57) || key === 46) {
        return;
    }
    event.preventDefault();
}

HTML & jQuery示例（可正常运行） #

app.html #

<!DOCTYPE html>
<html>
    <head>
        <title>Playground</title>
        <script src="js/jquery-3.7.1.js"></script>
    </head>
    <body>
        <input type="text" id="element" name="element" />
    
        <script>
            $( document ).ready(function() {
                $( "#element" ).keypress(function(e) {
                    var key = e.keyCode;
                    if ((key >= 48 && key <= 57) || key == 46) {
                        return;
                    }
                    e.preventDefault();
                });
            });
        </script>
    </body>
</html>

问题原因 #

核心问题是Angular事件绑定的语法错误：

• Angular中绑定原生DOM事件时，必须去掉事件名前的on前缀。你写的(onkeypress)不符合Angular的规则，正确写法是(keypress)，这就是事件无法触发的直接原因。而jQuery直接使用原生事件名keypress进行绑定，所以能正常工作。
• 额外补充：keyCode是已废弃的API，建议换成event.key来判断按键，比如判断数字用event.key >= '0' && event.key <= '9'，判断小数点用event.key === '.'，兼容性更优。

修复后的PrimeNG代码示例 #

app.component.html（修正事件绑定和label的for属性） #

<div class="p-field p-float-label">
    <input pInputText id="weight" name="weight" maxlength="10" [(ngModel)]="data.weight" (keypress)="isValidWeight($event)" />
    <label for="weight">Weight (Kg) 0.5 - 500</label>
</div>

app.component.ts（优化按键判断逻辑） #

isValidWeight(event: KeyboardEvent): void {
    const key = event.key;
    if ((key >= '0' && key <= '9') || key === '.') {
        return;
    }
    event.preventDefault();
}

内容的提问来源于stack exchange，提问作者Tim Kruger