How to capture input keyboard events?

You can capture input keyboard events by attaching the event handler to the keyboard events such as Keydown, Keypress, or Keyup with the input control. In the following example, the keyboard event handler is attached to all these three events. If you want to identify which keyboard event is captured, you can get the type using the KeyboardEventArg.Type property.

[index.razor]

[index.razor]

@page "/"

<input type="text" @onkeydown="KeyboardEventHandler " @onkeypress=" KeyboardEventHandler " @onkeyup="KeyboardEventHandler "/>

<h4>@KeyPressed </h4>
<h4>@EventInfo</h4>

@code {
    string KeyPressed = "";
    string EventInfo = "";
    private void KeyboardEventHandler(KeyboardEventArgs args)
    {
        KeyPressed = "Key Pressed is " + args.Key;
        EventInfo = "Event Type " + args.Type;
    }
}