Blazor数字输入组件：如何无需JS阻止鼠标滚轮修改值？

你当前的代码里，虽然跳过了StepUp/StepDown方法，但浏览器原生的number输入框会自行响应滚轮事件执行数值增减的默认行为，所以光设置args.DeltaY = 0根本拦不住。无需JavaScript的解决办法很简单：利用Blazor事件参数的PreventDefault()方法直接阻止浏览器的默认操作。

修改后的完整代码 #

Razor部分

<input type="number"
       step="1"
       disabled="@Disabled"
       readonly="@Readonly"
       @onmousewheel="@OnMouseWheel"
       @onwheel="@OnMouseWheel"
       @bind-value="@_value" />

C#事件处理逻辑

protected async Task OnMouseWheel(WheelEventArgs args)
{
    // 禁用滚轮、组件禁用或只读时，直接阻止浏览器默认行为
    if (DisableMouseWheel || Disabled || Readonly)
    {
        args.PreventDefault();
        return;
    }

    // 按住Shift键也不响应滚轮操作
    if (args.ShiftKey)
    {
        return;
    }

    // 正常处理滚轮触发的数值增减
    if (args.DeltaY > 0)
    {
        await StepUp();
    }
    else
    {
        await StepDown();
    }
}

关键说明 #

• args.PreventDefault()是Blazor内置的事件方法，专门用来取消浏览器的默认行为，这里就是直接拦截number输入框因滚轮改变数值的原生逻辑。
• 调整了判断顺序，优先处理需要拦截的场景，避免不必要的代码执行。
• 如果你的StepUp/StepDown是同步方法，把方法改成protected void OnMouseWheel(...)，去掉async和await即可。

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