Blazor处理按键事件获取KeyCodes实现文本框输入限制的技术问题

方案1：纯Blazor原生实现输入限制（无需KeyCode） #

Blazor的KeyboardEventArgs虽然没有KeyCode属性，但提供了Key、CtrlKey、AltKey、ShiftKey等标准属性，完全可以覆盖你的需求，直接在C#端实现校验逻辑即可：
首先给输入框绑定@onkeydown事件：

<input type="text" @onkeydown="HandleKeyDown" />

然后写C#处理方法：

private void HandleKeyDown(KeyboardEventArgs e)
{
    // 允许的控制键：退格、Tab、Esc、回车、删除
    var allowedControlKeys = new[] { "Backspace", "Tab", "Escape", "Enter", "Delete" };
    if (allowedControlKeys.Contains(e.Key))
    {
        return;
    }

    // 允许Ctrl/Cmd组合键：全选、复制、粘贴
    if (e.CtrlKey || e.MetaKey)
    {
        var allowedCombinationKeys = new[] { "a", "c", "v", "A", "C", "V" };
        if (allowedCombinationKeys.Contains(e.Key))
        {
            return;
        }
    }

    // 允许方向键、Home、End
    var allowedNavigationKeys = new[] { "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End" };
    if (allowedNavigationKeys.Contains(e.Key))
    {
        return;
    }

    // 允许字母N/n
    if (string.Equals(e.Key, "n", StringComparison.OrdinalIgnoreCase))
    {
        // 你原来的N键对应的业务逻辑写在这里
        return;
    }

    // 允许数字、小数点
    if (char.IsDigit(e.Key[0]) || e.Key is "." or ",")
    {
        // 这里可以加额外校验，比如只能有一个小数点、首位不能是0之类的逻辑
        return;
    }

    // 所有不符合的输入都阻止
    e.PreventDefault();
}

如果需要处理粘贴内容的校验，可以额外绑定@onpaste事件，拿到粘贴的内容做正则校验，不符合就阻止粘贴，避免粘贴非法内容。

方案2：复用原有JS代码，直接在JS层绑定事件拿KeyCode #

如果不想修改原有JS逻辑，可以不用Blazor的托管键盘事件，直接在JS中给对应元素绑定keydown事件，就能直接拿到原生的keyCode属性：

1. 给输入框加一个唯一标识，比如自定义class或者id：

<input type="text" class="custom-number-input" />

2. 写JS逻辑，页面加载完成后给所有匹配的元素绑定你原来的keypress事件即可：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.custom-number-input').forEach(input => {
        input.addEventListener('keydown', function(e) {
            // 你原来的keyCode逻辑直接放这里就行
            var datatype = this.getAttribute("data-type");
            // settings.valueChange.call(); 这里如果需要回调Blazor方法，可以用JSInterop调用
            if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
                ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
                (e.keyCode >= 35 && e.keyCode <= 40)) {
                if (e.keyCode == 86) {
                    // 粘贴逻辑
                }
                return;
            }
            if (e.keyCode === 78 || e.keyCode === 110) { 
                // N键业务逻辑写这里
                return;
            } 
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105) && e.keyCode != 110 && e.keyCode != 190) {
                e.preventDefault();
            }
        });
    });
});

如果需要在JS事件触发后调用Blazor的C#方法，可以通过DotNet.invokeMethodAsync实现跨语言调用，适配你原有的业务逻辑即可。

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