Blazor数字输入框最大值限制异常：手动输入超限未正确截断

原代码使用单向绑定value="@item.Quantity"配合@oninput事件时，当输入超过最大值的多位数（比如从13输入为136），虽然逻辑上把item.Quantity设为了最大值，但输入框的DOM值不会自动同步更新——因为Blazor的单向绑定是从组件状态到DOM，输入过程中DOM的临时值（136）会在事件处理后等待Blazor渲染周期更新，但受输入事件触发时机或浏览器number输入框行为影响，显示值无法及时刷新为最大值。

方案1：双向绑定+自定义Setter（推荐） #

利用Blazor双向绑定机制，配合自定义Setter处理数值限制，确保输入框显示与组件状态实时同步：

1. 修改输入框绑定代码 #

<td>
    <input min="0.01" class="quantityInput"
           type="number" step="0.01" 
           @bind-value="@item.Quantity"
           @bind-value:set="(value) => UpdateQuantityWithLimit(item, value)"
           @bind-value:event="oninput"
           max="@item.MaxQuantity" />
</td>

2. 实现自定义Setter方法 #

private void UpdateQuantityWithLimit(EditableSaleItemViewModel item, double value)
{
    // 处理最小值限制
    if (value < 0)
        value = 0;
    // 处理最大值限制
    else if (value > item.MaxQuantity)
        value = item.MaxQuantity;
    // 确保精度符合step=0.01要求
    value = Math.Round(value, 2);

    item.Quantity = value;
    // 更新单项总价
    item.TotalPrice = Math.Round(item.Quantity * item.UnitPrice, 2);
    // 更新总金额
    totalAmount = Math.Round(editableSaleItems.Sum(i => i.TotalPrice), 2);
}

方案2：修改ViewModel属性Setter（若允许修改ViewModel） #

如果可以修改EditableSaleItemViewModel，直接在Quantity属性的Setter中处理限制，所有绑定该属性的地方都会自动生效：

1. 调整ViewModel代码 #

public class EditableSaleItemViewModel
{
    private double _quantity;
    public double Quantity
    {
        get => _quantity;
        set
        {
            // 数值限制逻辑
            if (value < 0)
                _quantity = 0;
            else if (value > MaxQuantity)
                _quantity = MaxQuantity;
            else
                _quantity = Math.Round(value, 2);
            
            // 自动更新单项总价
            TotalPrice = Math.Round(_quantity * UnitPrice, 2);
        }
    }

    public double MaxQuantity { get; set; }
    public double UnitPrice { get; set; }
    public double TotalPrice { get; set; }
}

2. 简化输入框绑定 #

<td>
    <input min="0.01" class="quantityInput"
           type="number" step="0.01" 
           @bind-value="@item.Quantity"
           @bind-value:event="oninput"
           max="@item.MaxQuantity" />
</td>

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