如何在 Blazor 中使用 Enter 键在 Editform 的字段之间导航？

Answer 1

您可以通过此设置实现此功能，您可以使用 tabIndex 查找下一个按 Enter 键移动到的控件

<EditForm id="my-form" Model="@product" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
 
    <div class="form-group">
        <InputText id="ItmNo" tabindex=0 @bind-Value="@product.ItmNo" @onkeydown="@keydown" placeholder="Item No" />
    </div>
    <div class="form-group">
        <InputText id="ItmName" tabindex=1 @bind-Value="@product.ItmName" @onkeydown="@keydown" placeholder="Item Name" />
    </div>
    <div class="form-group">
        <InputText id="ItmDescription" tabindex=2 @bind-Value="@product.ItmDescription" @onkeydown="@keydown" placeholder="Item Description" />
    </div>
    <button type="submit" class="btn btn-primary">Register</button>
    <br />
    <br />
    <label></label><br />
</EditForm>


@code {

    private productDtoVM product = new();    
    
    public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
    {        
       if (args.Key == "Enter")
       {
          JsRuntime.InvokeVoidAsync("moveFocus");
      }
    }

    public class productDtoVM
    {
        public string ItmNo { get; set; }
        public string ItmName { get; set; }
        public string ItmDescription { get; set; }
    }
}

这是将焦点移动到下一个控件的 JavaScript 函数

function moveFocus() {
    var ele = document.activeElement;
    var tabIndex = ele.tabIndex;

    var inputs = document.getElementById("my-form").elements;

    for (i = 0; i < inputs.length; i++) {
        if (inputs[i].tabIndex > tabIndex)
        {
            inputs[i].focus();
            return;
        }
    }
}

让我知道你的想法

Answer 2

"I tried to use @onkeyup and @onkeydown instead of @onkeypress but they not working"

不，你将无法像这样获得活动，我们可以通过在 keydown 事件处理程序的 JS 互操作中调用 focus() 方法来实现同样的事情。 请尝试以下方法：

Edit Form:

@page "/"
@using System.ComponentModel.DataAnnotations


<EditForm Model="@product" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
 
    <div class="form-group">
        <InputText id="ItmNo" @bind-Value="@product.ItmNo" @onkeydown="@keydown" placeholder="Item No" />
    </div>
    <div class="form-group">
        <InputText id="ItmName" @bind-Value="@product.ItmName" @onkeydown="@keydown" placeholder="Item Name" />
    </div>
    <div class="form-group">
        <InputText id="ItmDescription" @bind-Value="@product.ItmDescription" @onkeydown="@keydown" placeholder="Item Description" />
    </div>
    <button type="submit" class="btn btn-primary">Register</button>
    <br />
    <br />
    <label> @KeyPressed</label><br />
</EditForm>

C# Code:

@code{
string KeyPressed = "";

public productDtoVM product = new productDtoVM();

[Inject]
protected IJSRuntime JsRuntime { get; set; }

public async Task HandleValidSubmit()
{
}
public class productDtoVM
{
    public string ItmNo { get; set; }
    public string ItmName { get; set; }
    public string ItmDescription { get; set; }
}

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
{
    KeyPressed = "Key Pressed is " + args.Key;
    if (args.Key == "Enter")
    {
        JsRuntime.InvokeVoidAsync("onFocus", "ItmNo");
    }
}

}

JavaScript Code On wwwroot

：

window.onFocus = (id) => {
    var currInput = document.activeElement;
    if (currInput.tagName.toLowerCase() == "input") {
        var inputs = document.getElementsByTagName("input");
        var currInput = document.activeElement;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i] == currInput) {
                var next = inputs[i + 1];
                if (next && next.focus) {
                    next.focus();
                }
                break;
            }
        }
    }
} 

注意： Javascript 代码应位于以下目录下：

Output:

注意：这只是一个快速演示示例，以便您了解如何处理

event handeler

中的

edit form

希望上述步骤能够相应地指导您。

Answer 3

Java 不适合我！ 您可以使用这个简单的方法。

        <MudTextField @bind-Value="Var1" Label="Prov." Variant="Variant.Text" MaxLength="4" @onkeydown="e => keyNext(0,e)" @ref="@Ref"></MudTextField>
        <MudTextField @bind-Value="Var2" Label="Ndoc." Variant="Variant.Text" MaxLength="8" @onkeydown="e => keyNext(1,e)" @ref="@Ref"></MudTextField>
        <MudTextField @bind-Value="Var3" Label="P.V.." Variant="Variant.Text" MaxLength="4" @onkeydown="e => keyNext(2,e)" @ref="@Ref"></MudTextField>

对于 C# 代码：

private List<MudTextField<string?>> _refs = new();
public MudTextField<string?> Ref { set => _refs.Add(value); }
public async void keyNext(int indice, Microsoft.AspNetCore.Components.Web.KeyboardEventArgs e)
{
    Debug.WriteLine("Tecla presionada " + e.Key);
    if (e.Key == "Enter" || e.Key == "NumpadEnter" || e.Key == "ArrowDown")
    {
        try
        {
            await _refs.ElementAt(indice + 1).FocusAsync();
        }
        catch
        {

        }
    }
    if (e.Key == "ArrowUp")
    {
        try
        {
            await _refs.ElementAt(indice - 1).FocusAsync();
        }
        catch
        {

        }
    }
}