ASP.NET Core绑定模型后HTML数字输入框Placeholder无法显示的问题排查与解决

问题原因 #

你遇到的这个情况，核心原因在于**asp-for绑定值类型属性时会自动生成value属性**：

• 你的Postage是decimal类型（值类型），默认值为0M，所以asp-for="Postage"会给input自动添加value="0"属性；
• 浏览器的规则是：当input存在非空的value值时，会优先显示value内容，而不会展示placeholder，这就是为什么移除asp-for后placeholder能正常显示的原因。

解决方法（保留模型绑定的前提下） #

这里提供几种实用的解决方案，你可以根据自己的需求选择：

方案1：将属性改为可空decimal类型

把Postage改成decimal?（可空值类型），这样默认值为null，asp-for就不会生成value属性，placeholder自然就能正常显示了。同时保留[Required]验证确保用户必须输入：

public class Game {
    [Key]
    public int Id {get; set;}
    [Required(ErrorMessage = "Enter postage amount or click on 'collection only'")]
    public decimal? Postage {get; set;}
    // 其他属性省略...
}

方案2：用JavaScript在页面加载时清空默认的0值

如果你不想修改模型类型，可以通过JS在页面加载完成后，把input的默认0值清空，让placeholder显示出来：

@model Website.Models.Game
<div class="form-group">
    <label asp-for="Postage"></label>
    <div class="input-icon">
        <input type="number" class="form-control postageInput" placeholder="0.00" asp-for="Postage"/>
        <i>£</i>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const postageInput = document.querySelector('.postageInput');
    // 当input值为"0"时清空，触发placeholder显示
    if (postageInput.value === '0') {
        postageInput.value = '';
    }
});
</script>

额外优化：指定数值显示格式

如果希望用户输入或编辑时保持两位小数的格式，可以给Postage属性添加[DisplayFormat]特性，配合asp-format使用：

[Required(ErrorMessage = "Enter postage amount or click on 'collection only'")]
[DisplayFormat(DataFormatString = "{0:F2}", ApplyFormatInEditMode = true)]
public decimal Postage {get; set;}

然后在input中添加asp-format="{0:F2}"：

<input type="number" class="form-control postageInput" placeholder="0.00" asp-for="Postage" asp-format="{0:F2}"/>

这样即使value是0，也会显示为0.00，和placeholder的样式保持一致。

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