Blazor按键事件和KeyCodes

Question

我在Razor控件库中创建一个控件。我只允许在文本框中按几个键。它们是：

1. 任何大于0的数字。这包括小数
2. 字母"N“或”n“
3. 允许用户复制/粘贴(control+c和control+c箭头和选项卡键

)。

我可以很容易地在Javascript中，通过使用密钥代码来完成这个任务。在JS中，我会这样做：

keyPress: function (e) {
        var datatype = e.currentTarget.getAttribute("data-type");
        settings.valueChange.call();
        //add 110, 190 for decimal          
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
            // Allow: Ctrl+A,Ctrl+C,Ctrl+V, Command+A
            ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
            // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
            // let it happen, don't do anything
            if (e.keyCode == 86) {
                //PASTE                
            }
            return;
        }
        if (e.keyCode === 78) {
            e.preventDefault();               
            //its an N, do some stuff
        } else if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    }

但是，我该怎么在Razor/Razor这样做？KeyboardEventArgs似乎没有提供KeyCode。我可以使用jsInterop调用我的JS函数，但是，同样，KeyboardEventArgs没有提供JS KeyCode。我如何在Blazor中完成这一任务，或者获得数字KeyCode，以便将其传递给我的JS函数？

Answer 1

您可以使用更多的Blazor方法来做到这一点，并在每次更改文本时检查字符串。

@using System.Text.RegularExpressions;
<input @bind-value="@InputValue" @bind-value:event="oninput"/>
<h4>@InputValue </h4>

@code {
    private string _inputVal = "";
    public string InputValue {
        get => _inputVal;
        set { 
        if((double.TryParse(value,out double d) && d>0)//is the number like 1.23
          || value.ToLower()=="n" || value=="" )//or is N,n or empty str
            _inputVal = value;
        }
        }
}

粘贴和箭头键按预期工作。

Answer 2

从这个博客中修改信息：https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/到

Dictionary<string, int> KeyCodes = new ()
        {
            { "Backspace", 8 },
            { "Tab", 9 },
            { "Enter", 13 },
            { "ShiftLeft", 16 },
            { "ShiftRight", 16 },
            { "ControlLeft", 17 },
            { "ControlRight", 17 },
            { "AltLeft", 18 },
            { "AltRight", 18 },
            { "Pause", 19 },
            { "CapsLock", 20 },
            { "Escape", 27 },
            { "Space", 32 },
            { "PageUp", 33 },
            { "PageDown", 34 },
            { "End", 35 },
            { "Home", 36 },
            { "ArrowLeft", 37 },
            { "ArrowUp", 38 },
            { "ArrowRight", 39 },
            { "ArrowDown", 40 },
            { "PrintScreen", 44 },
            { "Insert", 45 },
            { "Delete", 46 },
            { "Digit0", 48 },
            { "Digit1", 49 },
            { "Digit2", 50 },
            { "Digit3", 51 },
            { "Digit4", 52 },
            { "Digit5", 53 },
            { "Digit6", 54 },
            { "Digit7", 55 },
            { "Digit8", 56 },
            { "Digit9", 57 },
            { "KeyA", 65 },
            { "KeyB", 66 },
            { "KeyC", 67 },
            { "KeyD", 68 },
            { "KeyE", 69 },
            { "KeyF", 70 },
            { "KeyG", 71 },
            { "KeyH", 72 },
            { "KeyI", 73 },
            { "KeyJ", 74 },
            { "KeyK", 75 },
            { "KeyL", 76 },
            { "KeyM", 77 },
            { "KeyN", 78 },
            { "KeyO", 79 },
            { "KeyP", 80 },
            { "KeyQ", 81 },
            { "KeyR", 82 },
            { "KeyS", 83 },
            { "KeyT", 84 },
            { "KeyU", 85 },
            { "KeyV", 86 },
            { "KeyW", 87 },
            { "KeyX", 88 },
            { "KeyY", 89 },
            { "KeyZ", 90 },
            { "MetaLeft", 91 },
            { "MetaRight", 92 },
            { "ContextMenu", 93 },
            { "Numpad0", 96 },
            { "Numpad1", 97 },
            { "Numpad2", 98 },
            { "Numpad3", 99 },
            { "Numpad4", 100 },
            { "Numpad5", 101 },
            { "Numpad6", 102 },
            { "Numpad7", 103 },
            { "Numpad8", 104 },
            { "Numpad9", 105 },
            { "NumpadMultiply", 106 },
            { "NumpadAdd", 107 },
            { "NumpadSubtract", 109 },
            { "NumpadDecimal", 110 },
            { "NumpadDivide", 111 },
            { "F1", 112 },
            { "F2", 113 },
            { "F3", 114 },
            { "F4", 115 },
            { "F5", 116 },
            { "F6", 117 },
            { "F7", 118 },
            { "F8", 119 },
            { "F9", 120 },
            { "F10", 121 },
            { "F11", 122 },
            { "F12", 123 },
            { "NumLock", 144 },
            { "ScrollLock", 145 },
            { "AudioVolumeMute", 173 },
            { "AudioVolumeDown", 174 },
            { "AudioVolumeUp", 175 },
            { "LaunchMediaPlayer", 181 },
            { "LaunchApplication1", 182 },
            { "LaunchApplication2", 183 },
            { "Semicolon", 186 },
            { "Equal", 187 },
            { "Comma", 188 },
            { "Minus", 189 },
            { "Period", 190 },
            { "Slash", 191 },
            { "Backquote", 192 },
            { "BracketLeft", 219 },
            { "Backslash", 220 },
            { "BracketRight", 221 },
            { "Quote", 222 },
        };

现在，当您获得KeyboardEventArgs调用时，KeyCodes.TryGetValue(eventArgs.Code, out int code);将得到一个像JS中那样的数值。