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
相关产品推荐
相关产品推荐

