MudBlazor TextField正则掩码与标签添加功能异常问题求助

思路正确性 #

你的实现思路完全合理：用TextField做输入过滤、回车触发添加逻辑，ChipSet负责标签展示，这个流程既贴合需求，也为后续自动补全功能预留了扩展空间，方向没问题。问题出在掩码与输入绑定的同步机制上，导致快速输入时状态不同步，进而引发字符丢失和功能异常。

具体解决步骤 #

1. 手动接管输入过滤，避免掩码同步冲突 #

不要依赖组件自带的掩码属性，改用ValueChanged事件手动过滤非法字符，确保输入状态实时同步。这样能解决快速输入时的字符丢失问题，同时精准控制允许输入的内容。

2. 用HashSet存储标签，天然实现去重 #

用HashSet<string>替代普通列表存储标签，无需额外写去重逻辑，添加时直接判断是否存在即可。

3. 优化回车触发逻辑 #

确保回车时先完成文本的修剪、转小写处理，添加成功后再清空输入框，避免干扰输入状态。

完整示例代码 #

<MudTextField 
    @bind-Value="newTag" 
    ValueChanged="OnTagInputChanged"
    Label="添加标签" 
    Variant="Variant.Outlined"
    OnKeyDown="OnTagKeyDown" />

<MudChipSet @bind-SelectedValues="tags" MultiSelection="true">
    @foreach (var tag in tags)
    {
        <MudChip Text="@tag" OnClose="() => RemoveTag(tag)" />
    }
</MudChipSet>

@code {
    private string newTag = string.Empty;
    private HashSet<string> tags = new HashSet<string>();

    private void OnTagInputChanged(string value)
    {
        // 正则过滤：仅保留字母、数字和空格
        var filteredText = System.Text.RegularExpressions.Regex.Replace(value, @"[^a-zA-Z0-9\s]", "");
        newTag = filteredText;
    }

    private void OnTagKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            AddNewTag();
        }
    }

    private void AddNewTag()
    {
        var processedTag = newTag.Trim().ToLower();
        if (!string.IsNullOrEmpty(processedTag) && !tags.Contains(processedTag))
        {
            tags.Add(processedTag);
            newTag = string.Empty; // 添加成功后清空输入框
        }
    }

    private void RemoveTag(string tag)
    {
        tags.Remove(tag);
    }
}

后续自动补全扩展 #

当前结构可以无缝扩展自动补全功能：只需将MudTextField替换为MudAutocomplete，利用其SearchFunc实现标签联想。示例如下：

<MudAutocomplete<string>
    @bind-Value="newTag"
    SearchFunc="SearchTags"
    Label="添加标签"
    Variant="Variant.Outlined"
    OnKeyDown="OnTagKeyDown" />

@code {
    // 预设标签列表（可从后端获取）
    private List<string> presetTags = new List<string> { "blazor", "mudblazor", "frontend" };

    private async Task<IEnumerable<string>> SearchTags(string value)
    {
        var lowerValue = value.ToLower();
        // 合并已有标签和预设标签，返回匹配结果
        return tags.Concat(presetTags)
                   .Where(tag => tag.Contains(lowerValue))
                   .Distinct();
    }
}

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