C#Blazor:如何通过e.preventDefault()防止在JS中输入特定键? [英] C# Blazor: How to prevent specific key on input like in JS with e.preventDefault()?

问题描述

问题似乎很简单，但是我还没有找到任何解决方案.我有一个带有 onkeydown 事件的Blazor输入:

 < input @onkeydown ="@(e => KeyWasPressed(e))"@onkeydown:preventDefault ="@ PreventDefault"id ="@ GetId()"name ="@ GetId()"@ bind-value ="@ InputValue"@ bind-value:event ="oninput"/> 

用户应编写文本，但应使用箭头键在列表中导航(因此，我尝试防止光标移至文本的顶部和末端).

在JavaScript中，可能是这样的:

 功能KeyWasPressed(e){//按下如果(e.keyCode == 40){e.preventDefault();//一些工作...}//向上键否则(e.keyCode == 38){e.preventDefault();//一些工作...}} 

如何在Blazor中执行此操作?使用 @onkeydown:preventDefault 可以阻止全部输入.如果将其设置为变量( @PreventDefault )，则只能阻止 next 输入(因为第一个输入已经发生).只是为了了解我的意思:

• PreventDefault FALSE>输入"H">将PreventDefault设置为FALSE
• PreventDefault FALSE>输入"ArrowUp">将PreventDefault设置为 TRUE
• PreventDefault TRUE >输入"i">将PreventDefault设置为FALSE

因此输入将为(| =光标):H |> | H> | H

这意味着光标错误，并且阻止了"i".

有什么想法吗?感谢您的建议.

解决方案

不幸的是，目前还没有简单的解决方案.在这种情况下，如果您想回调您的.NET代码，您仍然需要使用JS事件处理程序和一些互操作性.

您会在这里 Blazor输入上的PreventDefault )，但这可能是一条坎bump的道路.

我个人希望将preventDefault和stopPropagation视为传递到C#方法处理程序中的EventArgs的一部分.我认为这在技术上具有挑战性.但是，它将简化许多用例.您可能想在aspnetcore上为此打开一个问题.

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.

解决方案

Unfortunately there is no easy solution for this at the moment. For that scenario you would still need to use a JS event handler and probably some interop if you want to call back into your .NET code.

You will find a very brief comment from Steve Sanderson about the reason (async handlers) here https://github.com/dotnet/aspnetcore/issues/14517#issuecomment-559184498

Another workaround is to bind your input to a variable and update the values manually. (also pointed out here PreventDefault on Blazor input ) But this is probably a bumpy road.

Personally, I would love to see the preventDefault and stopPropagation as part of the EventArgs that are passed into the C# method handlers. I assume that this is technically challenging. However, it would simplify a lot of use cases. You might want to open a issue for this over at aspnetcore.

这篇关于C#Blazor:如何通过e.preventDefault()防止在JS中输入特定键?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！