Blazor输入框输入第二个字母后无法自动清除非数字字符

你的问题出在**@bind-value和手动@oninput事件的冲突**上。@bind-value是Blazor的双向绑定语法糖，它本身会自动处理输入框的值同步，当你手动在@oninput里修改InputValue时，两次绑定逻辑会互相干扰，导致第二次输入字母时UI没有同步更新。

修复方案 #

把双向绑定@bind-value="InputValue"改成手动绑定value="@InputValue"，让输入框的显示完全由过滤后的InputValue控制，避免冲突。

修改后完整代码 #

@page "/"

<input type="text" placeholder="Enter a Value" value="@InputValue" @oninput="HandleInput" />
<label for="modal_table_autosearch">Search by name</label>

<button type="button" @onclick="() => HandleInput(new ChangeEventArgs { Value = null })">
Clear Value
</button>

@code {
private string? InputValue { get; set; }

private async Task HandleInput(ChangeEventArgs args)
{
    if (args.Value is null)
    {
        InputValue = null;
        return;
    }

    var newValue = args.Value?.ToString() ?? string.Empty;
    // 过滤出所有数字字符
    InputValue = new string(newValue.Where(char.IsDigit).ToArray());

    await Task.Delay(1);
}
}

关键说明 #

• 移除@bind-value后，输入框的显示值完全由InputValue决定，每次输入触发HandleInput过滤后，InputValue更新会直接同步到UI
• 清除按钮的逻辑保持不变，传入null会直接清空InputValue，输入框也会同步显示为空
• 这样修改后，无论输入多少次字母，输入框都会自动过滤掉，只保留数字，UI和变量始终保持一致

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