Enter key automation in blazor form

Question

This is a simple Register form created using blazor with MudBlazor Framework.

following you can see the code part of the Register form.

Register. razor

@using System.ComponentModel.DataAnnotations

<div style="max-width: 400px;">
<EditForm Model="@model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudCard>
        <MudCardContent>
            <MudTextField Label="First name" HelperText="Max. 8 characters"
                          @bind-Value="model.Username" For="@(() => model.Username)" @onkeydown="@keydown"/>
            <MudTextField Label="Email" Class="mt-3"
                          @bind-Value="model.Email" For="@(() => model.Email)" @onkeydown="@keydown"/>
            <MudTextField Label="Password" HelperText="Choose a strong password" Class="mt-3"
                          @bind-Value="model.Password" For="@(() => model.Password)" InputType="InputType.Password" @onkeydown="@keydown"/>
            <MudTextField Label="Password" HelperText="Repeat the password" Class="mt-3"
                          @bind-Value="model.Password2" For="@(() => model.Password2)" InputType="InputType.Password" @onkeydown="@keydown"/>
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Register</MudButton>
        </MudCardActions>


     </MudCard>
        <MudText Typo="Typo.body2" Align="Align.Center" Class="my-4">
            Fill out the form correctly to see the success message.
        </MudText>

        <MudExpansionPanels>
            <MudExpansionPanel Text="Show Validation Summary">
                @if (success)
                {
                    <MudText Color="Color.Success">Success</MudText>
                }
                else
                {
                    <MudText Color="@Color.Error">
                        <ValidationSummary />
                    </MudText>
                }
            </MudExpansionPanel>
        </MudExpansionPanels>
    </EditForm>
    </div>

    @code {

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

    RegisterAccountForm model = new RegisterAccountForm();
    bool success;

    public class RegisterAccountForm
    {
    [Required]
    [StringLength(8, ErrorMessage = "Name length can't be more than 8.")]
    public string Username { get; set; }

    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [StringLength(30, ErrorMessage = "Password must be at least 8 characters long.", MinimumLength = 8)]
    public string Password { get; set; }

    [Required]
    [Compare(nameof(Password))]
    public string Password2 { get; set; }

}

private void OnValidSubmit(EditContext context)
{
    success = true;
    StateHasChanged();
}
public void keydown() 
{ 
   
        @*what should I include here??*@
    
} 

}

Now I am going to add the enter key automation to this form.

requirements-

1. After adding some value to one field and press the enter button, the cursor pointer should be focused on the adjacent empty field to add a value.

e.g.:-after add any name to the First Name field and press the enter key, the cursor pointer should be automatically focused on the Email field(if the Email field is empty).

2. during the above process if found one field is already filled, ignore it and should move on to the next field.

e.g.: if we think the situation like cursor pointer is on the First Name field and the Email field is already filled but the password part is not filled yet. then after pressing the enter key, instead of moving to the Email field, ignore the Email field and the cursor pointer should be focused on the Password field to enter the discount.

3. after adding all fields and press the enter button, first validate the data, and after all of the data should be submitted.

I need to add the above 3 parts to add to my form using blazor. if anybody knows how to do this please help me. I highly appreciate all of your help.