如何在不消失的剃须刀编辑器中保留一些可编辑的文本？

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/

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

• 应用Can I hide the HTML5 number input’s spin box?

  中提到的样式

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

  • 无需担心这是否会破坏客户端验证。如果启用了该功能，则当您键入非数字的内容时，它仍会捕获它。

  • 您的服务器端验证也可以捕获