HTML5/razor 如何改变输入文本框的长度答案

【问题标题】：HTML5/razor how to alter length of a input text boxHTML5/razor 如何改变输入文本框的长度
【发布时间】：2013-06-21 16:43:57
【问题描述】：

为什么 html5 改变了这么多东西！

如何改变下面两个文本框的宽度？

  <div class="editor-field">
          @Html.TextBoxFor(m => m.S1_LandLine)
          @Html.ValidationMessageFor(m => m.S1_LandLine)
  </div>

和

  <input type="text" id="myinput" value="1" class="Q" data-id2="Q" />

和

<select id="S1_TitleID" name="S1_TitleID">
       <option selected="selected" value="1">Mr</option>
       <option value="2">Miss</option>
       <option value="3">Mrs</option>
</select>

【问题讨论】：

这不仅仅是 HTML5，这是 MVC 和 Razor ！
asp.net-mvc How to change width Html.TextBox 的可能重复项
查看链接问题，您可以使用 CSS 类，然后使用 JQuery ;-)
@Davide - 不要使用 jQuery 或 javascript 来做样式......这就是 CSS 的用途
不是做样式，而是改变客户端的宽度，以防他想改变css类中定义的宽度。我不清楚问题;-)

标签： c# asp.net-mvc-3 html razor

【解决方案1】：

使用 CSS：

.editor-field input[type="text"], .editor-field select
{
  width:100px;
}

【讨论】：

查看编辑，这假设选择在同一个 div 中，.editor-field 作为类。
还有；我建议你学习一些基本的 HTML/CSS。它有帮助:)

【解决方案2】：

生成所需的标记：

@Html.TextBoxFor(m => m.S1_LandLine, new { data_id2 = "Q", @class = "Q" })

就长度而言（无论这意味着什么），您可以使用 CSS 来指定 Q 规则 => 与 ASP.NET MVC 或 HTML5 没有任何关系。

【讨论】：

【解决方案3】：

HTML5 到底发生了什么变化？！我将假设您的长度是指maxlength，或者您可以在文本框中输入的字符数。我可能错了，但你的问题有点模棱两可。

首先你可以这样做：

<div class="editor-field">  
    @Html.TextBoxFor(m => m.S1_LandLine, new { maxlength = 10 })  
    @Html.ValidationMessageFor(m => m.S1_LandLine)  
</div>

第二个：

<input type="text" id="myinput" value="1" class="Q" data-id2="Q" maxlength="10" />

如果你不看maxlength，那你在看什么？

编辑：刚刚注意到你说的是宽度，如果是这样，请按照其他人的建议在这里。

【讨论】：

【解决方案4】：

我知道我有点跑题了，但是如果您正在寻找 maxlength 属性：

我们正在使用 MVC 模式：您的视图应该是模型的强类型。

查看

<div class="editor-label">
    @Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Rating)
    @Html.ValidationMessageFor(model => model.Rating)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Body)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Body)
    @Html.ValidationMessageFor(model => model.Body)
</div>

并且在模型中，我们可以设置定义的条件：

[Required]
[Range(1,10,ErrorMessage="Not in the 1-10 Range"]
public int Rating { get; set; }

[Required]
[StringLength(1024,ErrorMessage="Incorrect format")]
public string Body { get; set; }

【讨论】：