Blazor key press event and KeyCodes

Question

I am creating a control in a Razor Control Library. I am trying to only allow a few keys presses to be allowed in a text box. They are:

1. Any number greater than 0. This is to include decimals
2. The letter "N" or "n"
3. Allow the user to copy/paste (control+c and control+v).
4. Allow arrows and tab key

I can easily do this in Javascript, by using the Keycode. In JS, I would do this:

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();
        }
    }

But, how would I do this in Blazor/Razor? The KeyboardEventArgs does not seem to provide the KeyCode. I could use jsInterop to call my JS function, but, again, KeyboardEventArgs does not provide the JS KeyCode. How can I either accomplish this in Blazor or get the numeric KeyCode, so I can pass this to my JS function?

Spiritualist

Answer 1

You can use more Blazor way to do that and check the string every time the text is changed.

@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;
        }
        }
}

Pasting and arrow keys work as expected.

Gorblimey

Thanks, this is getting me there. Is there a way to limit to just one period? What I am trying to do is let someone type in any number (greater than 0) including decimal numbers. Or, they can type the letter "N" (to denote N/A) – Spiritualist

Oh, now I understand. See the updated answer! – Gorblimey

And I didn't realize you could use @bind-value:event="oninput" the way that you did. That is helpful in other areas. +1 – Spiritualist

Answer 2

Reformated info from this blog: https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/ to

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 },
        };

Now when you get your KeyboardEventArgs call KeyCodes.TryGetValue(eventArgs.Code, out int code); to get a numeric value like it was in JS.

Saks

github.com/taublast/DrawnUi.Maui/blob/main/src/Engine/Features/… – Saks