Blazor数字输入框step不生效及小数位数限制问题咨询

问题1：number类型输入框未遵循step属性设置 #

• 核心原因：绑定的decimal数值精度超过step定义的两位小数（比如初始值0.0001m），导致原生input的步进规则失效。
• 解决步骤：
  1. 所有对绑定变量的赋值操作，都用Math.Round(value, 2)将数值精度限制为两位小数，与step属性匹配。
  2. 给输入框添加@bind:format="F2"，约束输入框的显示和输入格式。

问题2：输入框始终显示4位小数 #

• 核心原因：Blazor默认根据decimal变量的实际存储精度渲染显示，未指定格式时会保留所有小数位。
• 解决步骤：
  使用@bind:format="F2"强制输入框仅显示两位小数，同时配合Math.Round确保变量存储的数值始终是两位小数，避免显示冗余位数。

修改后的完整代码 #

@page "/"
<h1>Counter</h1>

<p>Current count: @currentCount.ToString("F2")</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<input type="number"
       step="0.01"
       class="rounded no-spinner p-2 text-right w-full"
       @bind="currentCount" 
       @bind:format="F2" />

@code {
    decimal currentCount = Math.Round(0.0001m, 2);

    void IncrementCount()
    {
        currentCount = Math.Round(currentCount + 1.2m, 2);
    }
}

关键修改说明 #

• @bind:format="F2"：指定输入框的显示格式为两位小数，同时限制用户输入时只能输入两位小数，与step="0.01"完全匹配。
• Math.Round(..., 2)：确保变量存储的数值始终保持两位小数精度，从根源上避免因数值精度导致的显示和步进问题。
• 页面显示的currentCount用ToString("F2")统一格式，保证展示与输入框一致。

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