how to add maxlength for TextAreaFor in View using razor engine

Question

I have a TextArea() control in my View implemented using Razor Engine.

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

How can i set the Maxlength attribute for this control?
is there any built in Attribute in RazorEngine or do i have to use scripts?

Solution 1

You can do it like:

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

Just be aware it's an HTML5 attribute

maxlength HTML5
The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.

MDN

---

Javascript(using jQuery) validation for HTML <5:

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

DEMO

Solution 2

This also works for the TextAreaFor helper with more than one anonymous type in new

Confirmed to work fine in Visual Studio 2015 with MVC 5

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

Solution 3

You can also restrict the length of textbox, like this:

<textarea id="EventNature1" maxlength="10"></textarea>

        OR
@Html.TexareaFor(m=>m.Name,new{@maxlength="10"})

Comments

[gdoron is supporting Monica]

Note that you don't use TextAreaFor in your question...

[gdoron is supporting Monica]

It's not true. maxlength is an HTML5 attribute.

[Kamil]

Thnx... any way i've to use Javascript for the validation when it comes to HTML5 incompatible browsers rite?

[Kamil]

any link where i can follow-up for the javascript validation, coz i haven't used Js with Razor ;)

[gdoron is supporting Monica]

@Kamil. Didn't get your question.

[gdoron is supporting Monica]

@Kamil. Just the way you did. But you better use TextAreaFor

[MCollard]

The script doesn't work when you copy/paste text into the TextArea

[gdoron is supporting Monica]

@MCollard use same code, replace\add keypress with mouseup event.

[gdoron is supporting Monica]

This is an extremely old answer, and I don't use this website anymore. But I was pointed to it again, see here: developer.mozilla.org/en-US/docs/Web/HTML/Element/…