如何避免Blazor数字input输入框点击上下箭头时出现临时无效值

DevOps 小满

2026-9-30

问题原因

你遇到的临时值问题根源是默认@bind-value的同步时机晚于浏览器原生行为：点击数字输入框的上下箭头时，浏览器会先直接修改DOM节点上的显示值，之后才触发change事件同步到绑定的C#属性，等你的修正逻辑执行完再更新回输入框，中间的时间差就出现了非法值闪烁。

解决方案

改用手动绑定输入框值，拦截输入事件并阻止默认行为，完全由你的校验逻辑控制输入框的显示内容，即可消除临时值：

修改Index.razor代码

<input type="number" value="@Foo" @oninput="HandleInput" @oninput:preventDefault>

修改Index.razor.cs代码

你原有校验逻辑可以保留，只需新增输入事件处理方法：

public partial class Index
{
    private int _foo = 500;

    private int Foo
    {
        get => _foo;
        set
        {
            if (value == _foo) return;
            if (value > _foo)
            {
                _foo = value;
                while (_foo % 15 != 0 && _foo % 27 != 0)
                {
                    _foo++;
                }
            }
            else
            {
                _foo = value;
                while (_foo % 15 != 0 && _foo % 27 != 0)
                {
                    _foo--;
                }
            }
        }
    }

    private void HandleInput(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value?.ToString(), out int inputVal))
        {
            Foo = inputVal;
        }
    }
}