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

MudTextField输入框实时转换为大写的实现问题

解决MudBlazor MudTextField自动转大写的问题

直接使用@oninput和@bind-Value会存在逻辑冲突,导致值更新异常,以下是两种可靠的实现方案:

方案一:通过模型属性Setter处理(推荐)

在AddEditItemModel中修改HSNSAC属性的Setter,将输入值自动转为大写,这种方式无需修改UI组件代码,所有对该属性的赋值都会自动生效:

private string _hsnsac;
public string HSNSAC
{
    get => _hsnsac;
    set => _hsnsac = value?.ToUpperInvariant();
}

UI组件保持原有代码即可:

<MudTextField For="@(() => AddEditItemModel.HSNSAC)"
               @bind-Value="AddEditItemModel.HSNSAC"
               Label="@_localizer["SAC"]"
               MaxLength="3">
</MudTextField>

方案二:使用MudTextField的TextChanged事件

利用组件内置的TextChanged事件处理文本变化,避免与@bind-Value的默认绑定逻辑冲突:

UI组件代码

<MudTextField For="@(() => AddEditItemModel.HSNSAC)"
              @bind-Value="AddEditItemModel.HSNSAC"
              Label="@_localizer["SAC"]" 
              MaxLength="3"
              TextChanged="OnTextChanged">
</MudTextField>

后端处理方法

private void OnTextChanged(string inputText)
{
    AddEditItemModel.HSNSAC = inputText?.ToUpperInvariant();
}

注意:ToUpperInvariant()是针对国际化场景的大写转换,若仅需处理英文,也可使用ToUpper(),但前者兼容性更强。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.11 08:05:30