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

Blazor Server应用表单验证通过时启用按钮的异常问题求助

问题原因
  • 核心逻辑错误:多余的键盘事件处理方法违规拼接输入内容
    你编写的KeyboardEventHandler没有对按键类型做判断,无论按下的是可输入字符还是退格、回车、Shift等功能键,都直接把KeyboardEventArgs.Key的返回值拼接到模型字段后。对于功能键,Key属性返回的是功能键名称字符串(比如退格对应Backspace、回车对应Enter),直接拼接就会出现你遇到的功能键名称被写入输入框的问题。
  • 重复实现Blazor内置双向绑定能力
    你已经为InputText组件配置了@bind-Value双向绑定,Blazor内置的表单组件会自动同步输入内容到模型,同时自动触发EditContext的OnFieldChanged事件,完全不需要你手动监听键盘事件更新模型、手动通知字段变更,这部分逻辑属于完全多余的画蛇添足。
修复方案
  1. 移除两个InputText标签上的@onkeyup事件绑定,删除后标签示例:
<InputText Id="name" @bind-Value="@Model.Name" />
<InputText Id="body" @bind-Value="@Model.Text" />
  1. 删除后台代码中无用的KeyboardEventHandler方法,以及KeyPressed、EventInfo两个未使用的字段。
  2. (可选优化)调整提交按钮禁用状态的属性定义,更符合Blazor的使用规范:
    将字符串类型的OkayDisabled改为布尔类型:
// 旧代码
// protected string OkayDisabled { get; set; } = "disabled";
// 新代码
protected bool IsSubmitDisabled { get; set; } = true;

调整SetOkDisabledStatus逻辑:

private void SetOkDisabledStatus()
{
    IsSubmitDisabled = !EditContext.Validate();
}

修改按钮的禁用属性绑定:

<button type="submit" disabled="@IsSubmitDisabled">Ok</button>

修改后表单的双向绑定、校验触发、按钮状态更新逻辑都会正常运行,也不会再出现功能键名称被写入输入框的问题。

内容的提问来源于stack exchange,提问作者Baba

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.10.06 06:06:03