如何在 asp.net 的剃刀视图中禁用旋转按钮？答案

【问题标题】：How to disable spin buttons in razor view of asp.net?如何在 asp.net 的剃刀视图中禁用旋转按钮？
【发布时间】：2021-11-17 15:54:52
【问题描述】：

在模型类列名称为 public int? CTScore { get; set; }，在 Razor 视图中我想将其用作 @Html.EditorFor(model => model.CTScore)。

它与向上/向下箭头旋转按钮一起显示为编辑框，但我不需要显示这些旋转按钮。怎么做？

感谢任何帮助。

【问题讨论】：

标签： asp.net

【解决方案1】：

听起来 Razor 正在将 type="number" 添加到您的 input 字段中，这会导致现代浏览器显示旋转按钮。如果您想禁用此功能并改用type="text"，您可以将DataType 属性添加到您的属性：

[DataType(DataType.Text)]
public int? CTScore { get; set; }

【讨论】：

【解决方案2】：

下面这行是你需要的。

@Html.EditorFor(model => model.CTScore, new { htmlAttributes = new { @type="text" } })

【讨论】：

【解决方案3】：

基于此链接：

您可以将其添加到您的 CSS 文件中：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

这将删除微调器，并且只允许输入数字，而不是文本。

【讨论】：