如何使用Blazor和KeyBoardEventArgs禁止发送密钥

Question

我有一个带有onkeydown事件的inputfield。我正在用扫描仪扫描一些号码。扫描仪配置是读取条形码，然后发送一个Tab。因此，如果发送了一个Tab，则数字会添加到列表中。通过JS，它将inputfield的值设置回null，然后再次关注inputfield。

问题是，在我的函数完成后，Tab仍然会被发送，因此焦点不再放在我的输入字段上。在这种情况下，如何抑制Tab键？

enter code here
private async void addToTable(KeyboardEventArgs args)
{
if (args.Key != "Tab")
{
LeNumber += args.Key.ToString();
}
else
{
if (!string.IsNullOrWhiteSpace(LeNumber))
{
if (todos.Contains(LeNumber))
{
LeNumber = null;
await TurnRed("table");
await Focus("LeNumber");
}
else
{
if (LeNumber == "submit")
{
generateXml();
b += 1;
}
else
{
todos.Add(LeNumber);
LeNumber = null;                    
await SetValueBack("LeNumber");
await Focus("LeNumber");
await TurnNormal("table");
}
}
}
}
}

Answer 1

试试这样的东西：

<input value="@LeNumber" type="text" @onkeydown="@addToTable" @onkeydown:preventDefault="@isPreventDefault" />
@code {
private string LeNumber{ get; set; }
private bool isPreventDefault { get; set; }
private void onKeydown(KeyboardEventArgs args)
{
if(args.Key == "Tab")
{
this.isPreventDefault = true;
}
}
}

然后从处理程序中删除Tab测试。

有一种类似的方法可以停止传播。https://www.meziantou.net/how-to-use-event-preventdefault-in-blazor.htm

Answer 2

在<input/>中出现"Tab"时，是否可以尝试使用lambda表达式来分离逻辑？

<input type="text" class="form-control" @onkeydown="@(e => { if (e.Key != "Tab") MyMethod(e); else MyMethod2(e); })" />

在MyMethod2中，在Tab键的情况下可以有单独的逻辑(例如将焦点放回输入(。

@code
{
private void MyMethod(KeyboardEventArgs e)
{
MyNumber += e.Key;
}

private async void MyMethod2(KeyboardEventArgs e)
{
if (!string.IsNullOrEmpty(MyNumber)
AllMyNumbers.Add(MyNumber);
MyNumber = "";
await jsRuntime.InvokeVoidAsync("FocusOnInputAndClearInputValue");
//Even if Tab key is sent several times, focus will be sent back to input each time...
}
}