C# Blazor：如何使用 e.preventDefault() 防止像在 JS 中那样输入特定键？

Question

问题看起来很简单，但我还没有找到任何解决方案。我有一个带有onkeydown事件的 Blazor 输入：

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

用户应该写文本，但用户应该使用箭头键在列表中导航（所以我试图阻止光标移动到文本的顶部和结尾）。

在 JavaScript 中，这可能是这样的：

function KeyWasPressed(e)
{
    // key down
    if (e.keyCode == 40)
    {
        e.preventDefault();
        // some work...
    }
    // key up
    else if (e.keyCode == 38)
    {
        e.preventDefault();
        // some work...
    }
}

如何在 Blazor 中做到这一点？用@onkeydown:preventDefault你可以防止整个输入。如果我将其设置为变量 ( @PreventDefault)，则只能阻止下一个输入（因为第一个输入已经发生）。只是为了理解我的意思：

• preventDefault FALSE > 输入“H”> 将 preventDefault 设置为 FALSE
• preventDefault FALSE > 输入“ArrowUp”> 将 preventDefault 设置为TRUE
• preventDefault TRUE > 输入“i”> 将 preventDefault 设置为 FALSE

所以输入将是 (| = Cursor): H| > |H > |H

这意味着 Cursor 是错误的并且“i”被阻止了。

有任何想法吗？谢谢指教。

Answer 1

（晚了很多年，但也许这会对其他人有所帮助。）

drocha87指出该方法仅适用于 WebAssembly（wasm）。

onkeydown甚至在默认值之前触发，因此我们可以在使用之前立即禁用它。这个@onkeydown:preventDefault=true.想法来自这里。

笔记：

<input @onkeydown="KeyWasPressed"  @onkeydown:preventDefault="preventDefault" @bind-value="@InputValue" />

@code  {
  bool preventDefault = false;
  string InputValue = "";

  private void KeyWasPressed(KeyboardEventArgs e)
  {
      // key down
      if (e.Key == "ArrowDown")
      {
          preventDefault = true;
          // some work...
      }
      // key up
      else if (e.Key == "ArrowUp")
      {
          preventDefault = true;
          // some work...
      }
      else 
      {
          preventDefault = false;
      }
  }  
}

Answer 2

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

您会在此处找到 Steve Sanderson 关于原因（异步处理程序）的非常简短的评论https://github.com/dotnet/aspnetcore/issues/14517#issuecomment-559184498

另一种解决方法是将您的输入绑定到一个变量并手动更新值。（这里也指出了Blazor input 上的 preventDefault）但这可能是一条崎岖不平的道路。

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