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

【问题标题】：How to have a editable bit of text in a razor editor that does not disappear?如何在剃须刀编辑器中保留一段不会消失的可编辑文本？
【发布时间】：2020-08-11 16:32:22
【问题描述】：

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

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

<div class="col-sm">
  @Html.LabelFor(m => m.Capacity)
  @Html.EditorFor(m => m.Capacity, new { htmlAttributes = new { @class = "form-control" } })
</div>

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

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

【问题讨论】：

20 是硬编码的值吗？
我希望它是，最好也能够在 javascript 中编辑它

标签： javascript html jquery razor bootstrap-4

【解决方案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" })
- 不必担心这是否会破坏客户端验证。如果你打开了它，当你输入不是数字的东西时它仍然会捕捉到它。
- 您的服务器端验证也会捕获它

【讨论】：

嘿大卫，谢谢你的回答，所以得到这样的输入效果很好，有没有办法摆脱输入框右侧的箭头？还是这是浏览器的问题？
@GeorgeB：这是浏览器的问题。它显示为这样的原因可能是您将Capacity 声明为双精度或整数，当您使用EditorFor() 甚至TextBoxFor() 时，MVC 会巧妙地将其转换为浏览器支持的输入类型之一。在这种情况下，它是type="number"。要隐藏箭头，您可能必须像这样应用 CSS：stackoverflow.com/questions/3790935/…。或者也许你用type="text"覆盖输入？