【问题标题】:how to add maxlength for TextAreaFor in View using razor engine如何使用剃刀引擎在视图中为 TextAreaFor 添加 maxlength
【发布时间】:2012-05-22 02:17:24
【问题描述】:

我的视图中有一个使用 Razor 引擎实现的 TextArea() 控件。

@Html.TextArea("EventNature",new { style = "width: 200px; height: 100px;" })

如何设置此控件的 Maxlength 属性?
RazorEngine 中是否有任何内置属性或者我必须使用脚本?

【问题讨论】:

  • 请注意,您的问题中不要使用TextAreaFor...

标签: html asp.net-mvc asp.net-mvc-3 razor


【解决方案1】:

如何设置此控件的 Maxlength 属性?

maxlength 属性对<textarea> 元素无效。这不是 ASP.NET MVC 限制。在 HTML 规范中,此属性仅针对简单的文本输入字段定义。如果您想限制用户可以在文本区域中输入的字符数,您可以使用 javascript。

【讨论】:

【解决方案2】:

你可以这样做:

@Html.TextArea("EventNature",new { maxlength=50, // or other value
                                  style = "width: 200px; height: 100px;" })

请注意这是一个 HTML5 属性

最大长度 HTML5
用户可以输入的最大字符数(Unicode 代码点)。如果没有指定,用户可以输入无限个字符。

MDN


Javascript(使用 jQuery) 验证 HTML

$('#EventNature').keypress(function(){
    if (this.value.length >= 10) // allowing you to enter only 10 chars.
    return false;        
});​

DEMO

【讨论】:

  • Thnx...当涉及到 HTML5 不兼容的浏览器仪式时,我必须使用 Javascript 进行验证吗?
  • 任何我可以跟进 javascript 验证的链接,因为我没有使用带有 Razor 的 Js ;)
  • @Kamil。没有得到你的问题。
  • @Kamil。就像你做的那样。但你最好使用TextAreaFor
  • 将文本复制/粘贴到 TextArea 时脚本不起作用
【解决方案3】:
<p>Customer Number: @Html.TextBox("SearchString1",null, new {maxlength = 6})
 <input type="submit" value="Filter" /></p>

上面是一个示例,它对我限制了允许输入的最大字符数。在使用 .Net 环境时显示的提示非常有用。 (*注意,这不会改变文本框的大小)

"SearchString1" = 字符串名称 ----- null = 对象值 ------ new {maxlength = 6} = 对象 htmlAttributes

【讨论】:

    【解决方案4】:

    你也可以限制文本框的长度,像这样:

    <textarea id="EventNature1" maxlength="10"></textarea>
    
            OR
    @Html.TexareaFor(m=>m.Name,new{@maxlength="10"})
    

    【讨论】:

      【解决方案5】:

      这也适用于new中具有多个匿名类型的 TextAreaFor 助手

      确认Visual Studio 2015工作正常MVC 5

      @Html.TextAreaFor(model => model.Comments, 5, 500, new {maxlength=4000,  @class = "form-control" })
      

      【讨论】:

        猜你喜欢
        • 2015-10-19
        • 1970-01-01
        • 1970-01-01
        • 2011-03-16
        • 2011-04-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多