Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to prevent specific key on input like in JS with e.preventDefault()?

$
0
0

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.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>