如何在输入时将MudTextField文本转换为大写

有几种实用的方法可以实现这个需求，根据你的场景选择即可：

方法一：通过Input事件实时转换并保持光标位置 #

这种方式会在用户输入时立刻转换文本为大写，同时处理光标位置避免体验问题：

首先修改MudTextField组件，添加Input事件绑定：

<MudTextField Required="true" 
              Label="@languageContainer.Keys["FirstNameUS"]" 
              Variant="Variant.Outlined" 
              @bind-Value="person.FirstNamesUS" 
              For="@(() => person.FirstNamesUS)"
              Input="OnFirstNameInput" />

然后在代码块中实现事件处理方法：

private void OnFirstNameInput(InputEventArgs e)
{
    var inputText = e.Value?.ToString() ?? string.Empty;
    var upperText = inputText.ToUpperInvariant();
    
    // 获取当前光标位置
    var targetElement = (ElementReference)e.Target;
    var selectionStart = targetElement.GetProperty<int>("selectionStart");
    var selectionEnd = targetElement.GetProperty<int>("selectionEnd");
    var lengthDiff = upperText.Length - inputText.Length;
    
    // 更新绑定值为大写
    person.FirstNamesUS = upperText;
    
    // 异步调整光标位置，避免光标跳到文本末尾
    _ = Task.Delay(1).ContinueWith(_ =>
    {
        targetElement.CallVoidAsync("setSelectionRange", selectionStart + lengthDiff, selectionEnd + lengthDiff);
    });
}

方法二：通过属性setter自动转换 #

如果希望所有修改person.FirstNamesUS的场景都自动转为大写，可以直接在属性的setter中处理：

修改你的Person类（或对应的属性定义）：

private string _firstNamesUS;
public string FirstNamesUS
{
    get => _firstNamesUS;
    set => _firstNamesUS = value?.ToUpperInvariant() ?? string.Empty;
}

组件不需要额外修改，保持你原来的代码即可：

<MudTextField Required="true" 
              Label="@languageContainer.Keys["FirstNameUS"]" 
              Variant="Variant.Outlined" 
              @bind-Value="person.FirstNamesUS" 
              For="@(() => person.FirstNamesUS)" />

注意：仅显示大写的CSS方式（不推荐用于需要值大写的场景） #

如果你只是想让输入框显示的文本看起来是大写，但实际绑定的值保留用户原输入，可以用CSS实现，但这种方式不会修改实际绑定值，仅做视觉效果：

.mud-input input {
    text-transform: uppercase;
}

内容的提问来源于stack exchange，提问作者R Khan