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

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>

    <div class="form-group">

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

        <div class="input-group">

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

            <div class="input-group-append">

                <span class="input-group-text">/20</span>

            </div>

        </div>

    </div>

</form>

演示： https ://jsfiddle.net/davidliang2008/36mapuft/7/

要摆脱输入中的箭头，有两种方法：

• 应用我可以隐藏 HTML5 数字输入的旋转框吗？

• 将属性覆盖为type“文本”，例如，@Html.EditorFor(x => x.Capacity, new { @type = "text", @class = "form-control" })

• 如果这会破坏客户端验证，则无需担心。如果你打开它，当你输入不是数字的东西时它仍然会捕捉到它。

• 您的服务器端验证也会捕获它