如何在不会​​消失的剃刀编辑器中拥有一段可编辑的文本？

Question

我不知道我要寻找的功能的名称，这让我抓狂。

我正在使用以下剃须刀代码来显示我的表单输入：

<div class="col-sm">

  @Html.LabelFor(m => m.Capacity)

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

</div>

我想删除显示“向上和向下”箭头的控件，而是在其中放置一些文本，如下所示：

我想要一个看起来像绿色箭头图像的图像，红色箭头图像是我目前拥有的图像，在此先感谢。当用户在框中键入内容时，文本也不应消失。

Answer 1

您可以使用Bootstrap Input Group来实现：<form>&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; @Html.LabelFor(x => x.Capacity)&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @Html.EditorFor(x => x.Capacity, new { @class = "form-control" })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group-append">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="input-group-text">/20</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></form>演示：&nbsp;https ://jsfiddle.net/davidliang2008/36mapuft/7/要摆脱输入中的箭头，有两种方法：应用我可以隐藏 HTML5 数字输入的旋转框吗？将属性覆盖为type“文本”，例如，@Html.EditorFor(x => x.Capacity, new { @type = "text", @class = "form-control" })如果这会破坏客户端验证，则无需担心。如果你打开它，当你输入不是数字的东西时它仍然会捕捉到它。您的服务器端验证也会捕获它