Javascript 如何在razor编辑器中拥有不消失的可编辑文本位？

我不知道我正在寻找的功能的名称，这让我发疯

我使用以下razor代码显示我的表单输入：

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

@LabelFor（m=>m.Capacity）
@EditorFor（m=>m.Capacity，new{htmlAttributes=new{@class=“form control”}）

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

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

您可以使用来实现这一点：

<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>

@LabelFor（x=>x.Capacity）
@EditorFor（x=>x.Capacity，新的{@class=“form control”}）
/20

演示：

要消除输入中的箭头，有两种方法：

• 应用中提到的样式

• 将

  type

  属性重写为“text”，例如

  @Html.EditorFor（x=>x.Capacity，new{@type=“text”，@class=“form control”}）

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

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

---

这20是一个硬编码值吗？我希望它是，最好能用javascript编辑它tooHey David，谢谢你的回答，所以这样输入效果很好，有没有办法去掉输入框右侧的箭头？或者这是一个浏览器的东西？@GeorgeB:这是一个浏览器的东西。出现这种情况的原因可能是您将

容量声明为double或integer，并且当您使用
EditorFor（）
甚至
TextBoxFor（）
时，MVC将智能地将其转换为浏览器支持的输入类型之一。在本例中，它是
type=“number”
。要隐藏箭头，您可能必须像这样应用CSS:。或者您可以使用
type=“text”
覆盖输入？