如何解决如何使用 Blazor 和 KeyBoardEventArgs 禁止发送密钥
我有一个带有 onkeydown 事件的输入字段。 我正在用扫描仪扫描一些数字。扫描仪配置是读取条形码,然后发送标签。 因此,如果发送选项卡,则将数字添加到列表中。通过 JS,它将输入字段的值设置回 null,然后再次关注输入字段。
问题是在我的功能完成后仍然发送 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");
}
}
}
}
}
解决方法
如果 <input/>
中有“制表符”,您能否尝试使用 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...
}
}
,
尝试这样的事情:
<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。