The problem seems very simple, but I didn't found any solutions yet.I have a Blazor Input with an onkeydown event:
<input @onkeydown="@(e => KeyWasPressed(e))"@onkeydown:preventDefault="@PreventDefault"id="@GetId()"name="@GetId()"@bind-value="@InputValue"@bind-value:event="oninput" />The User should write text, but with the arrow keys the user should navigate within a list (so I try to prevent the cursor to move to the top and the end of the text).
In JavaScript this could be something like this:
function KeyWasPressed(e){ // key down if (e.keyCode == 40) { e.preventDefault(); // some work... } // key up else if (e.keyCode == 38) { e.preventDefault(); // some work... }}How to do this in Blazor? With @onkeydown:preventDefault you can prevent the whole input. If I set it to a variable (@PreventDefault), I can prevent only the next input (because the first input already happened). Just for understanding what I mean:
- PreventDefault FALSE > Input "H"> set PreventDefault to FALSE
- PreventDefault FALSE > Input "ArrowUp"> set PreventDefault to TRUE
- PreventDefault TRUE> Input "i"> set PreventDefault to FALSE
So Input will be (| = Cursor): H| > |H > |H
Which means the Cursor is wrong and the "i" was prevented.
Any ideas? Thanks in advice.