使用 MVC 5 EditorFor 从数字输入类型中删除滑块/微调器答案

【问题标题】：Remove slider/spinner from input type of number with MVC 5 EditorFor使用 MVC 5 EditorFor 从数字输入类型中删除滑块/微调器
【发布时间】：2016-04-15 04:40:41
【问题描述】：

我将 Razor 与 MVC 5 一起用于具有整数值的模型。如果我使用

@Html.EditorFor(model => model.WeekPrice, new { htmlAttributes = new { @class = "form-control" } })

我在文本框中出现了一个滑块/微调器；生成的 HTML 是：

<input type="number" ...

如果我使用@Html.TextboxFor(model 或将数据类型更改为decimal，微调器将消失，HTML 输入类型更改为文本。

如何使用EditorFor 并抑制微调器？

【问题讨论】：

使用TextBoxFor()有什么问题？ EditorFor() 方法专门设计用于根据属性类型（或基于[DataType] 属性）生成type 属性，以便它使用浏览器HTML5 输入
简单，我更喜欢造型。我也想了解如何实现这一点。
什么造型？（您可以使用TextboxFor() 实现完全相同的效果）。如果你真的想使用EditorFor() 方法，你可以试试new { htmlAttributes = new { @class = "form-control", type = "text" } 但这只是额外的代码
文本框的形状有所不同。但是，如果您在答案中发表评论，我很乐意接受。
我真的不知道你为什么不直接使用@Html.TextBoxFor(m => m.WeekPrice, new { @class = "form-control" }，它会生成一个标准的type="text" 输入。请注意，type="number" 将使用数字输入的浏览器实现，该数字输入在不同浏览器中的外观会有所不同

标签： c# asp.net-mvc razor

【解决方案1】：

我看不出有什么理由你不能使用TextBoxFor() 来达到这个目的，因为基本上你试图将它显示为普通的TextBox 控件而不是数字上/下控件。无论如何，您可以使用 CSS 来实现这一点。取自CSS Tricks: Turn Off Number Input Spinners

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

【讨论】：