You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MudBlazor登录表单按Enter键提交需两次操作方可成功的问题咨询

MudBlazor登录表单按Enter键提交需两次操作方可成功的问题咨询

各位好,我最近在做Blazor项目的登录功能时遇到了一个很诡异的问题,想请大家帮忙看看:

当我输入正确的用户名和密码后,在用户名输入框按Enter键提交,应用会立刻显示"Invalid username or password"的错误提示,但如果我再按一次Enter键,就能成功完成登录跳转;不过要是直接点击页面上的登录按钮,一次就能成功登录,完全没有问题。

下面是我当前的登录页面代码:

Razor模板部分

@page "/"
@using MudBlazor.Components.Layout
@using MudBlazor.Components.Service
@using Stocky.Shared.Models
@inject HttpClient Http
@inject NavigationManager Navigation
@inject AuthService AuthService
@layout NoNavbar

<div class="d-flex justify-center align-center" style="height: 70vh;">
    <MudGrid Class="ma-0 pa-6" Style="max-width: 600px;">
        <MudItem xs="12">
            <MudPaper Class="pa-6" Elevation="3">
                <MudForm>
                    <MudTextField T="string" 
                                  @ref="_firstInput" 
                                  @bind-Value="Data.UserName" 
                                  Label="Username" 
                                  Class="mb-4" 
                                  Error="@_isLoged" 
                                  OnKeyDown="HandleKeyDown" 
                                  ErrorText="Invalid username or password" />
                    <MudTextField T="string" 
                                  @ref="_secondInput" 
                                  @bind-Value="Data.PasswordHash" 
                                  Label="Password" 
                                  InputType="InputType.Password" 
                                  Class="mb-4" 
                                  Error="@_isLoged" 
                                  OnKeyDown="Enter" 
                                  ErrorText="Invalid username or password" />
                    <MudButton Variant="Variant.Filled" 
                               OnClick="Submit" 
                               Color="Color.Primary" 
                               FullWidth="true">
                        Login
                    </MudButton>
                </MudForm>
            </MudPaper>
        </MudItem>
    </MudGrid>
</div>

逻辑代码部分

@code {
    private MudTextField<string> _firstInput = null!;
    private MudTextField<string> _secondInput = null!;

    [Parameter]
    public AuthenticationData Data { get; set; } = new();

    private bool _isLoged;
    private bool _isSubmitting = false;

    protected override async Task OnInitializedAsync()
    {
        await AuthService.LoadTokenAsync();
        if (!string.IsNullOrWhiteSpace(AuthService.Token))
        {
            Navigation.NavigateTo("/home", true);
        }
    }

    private async Task Submit()
    {
        if (_isSubmitting) return;
        _isSubmitting = true;
        _isLoged = false;
        StateHasChanged();

        try
        {
            var response = await Http.PostAsJsonAsync("http://localhost:5191/api/Auth/Verify", Data);
            if (response.IsSuccessStatusCode)
            {
                var resultText = await response.Content.ReadAsStringAsync();
                var loginResponse = new LoginResponse { Token = resultText };
                
                if (!string.IsNullOrWhiteSpace(loginResponse.Token))
                {
                    AuthService.SetToken(loginResponse.Token);
                    _isLoged = false;
                    Navigation.NavigateTo("/home");
                }
                else
                {
                    _isLoged = true;
                }
            }
            else
            {
                _isLoged = true;
            }
        }
        catch
        {
            _isLoged = true;
        }
        finally
        {
            _isSubmitting = false;
            StateHasChanged();
        }
    }

    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Tab")
        {
            await _secondInput.FocusAsync();
        }
    }

    private async Task Enter(KeyboardEventArgs e)
    {
        if (e.Key is "Enter" or "NumpadEnter")
        {
            await Submit();
        }
    }

    public class LoginResponse
    {
        public string? Token { get; set; }
    }
}

为了排查问题,我已经做了这些调整:

  • 移除了HandleKeyDown方法里的Submit调用,现在只有密码输入框的Enter键会触发提交逻辑
  • 加了日志确认Submit方法没有被重复调用
  • 在修改状态后手动调用了StateHasChanged()确保UI更新

但问题依然存在,想请教下有没有朋友遇到过类似的情况,或者能帮我找出问题出在哪里?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.07 10:18:03