limit TextBox to 500 characters

Question

I am trying to limit my textbox to include max 500 character, for example i want to receive a question from the user but it the max length is 500 and how can i show the number of how many character left while writing ?

this is my code in the view, but i don't know its not working, i have tried various ways!

<li>
    @Html.LabelFor(m => m.TeacherQuestion, new { maxlength = 500 })
    @Html.TextBoxFor(m => m.TeacherQuestion  , new { maxlength = 500})
</li>

I have edited your title. Please see, "[Should questions include “tags” in their titles?](http://meta.stackexchange.com/questions/19190/)", where the consensus is "no, they should not". — John Saunders, Dec 28 '14 at 00:34

score 1 · Accepted Answer · edited May 23 '17 at 12:20

There is no built-in element or attribute for this - you need to use Javascript.

Assign an ID to your input and add a new element to hold the remaining character count

@Html.TextBoxFor(m => 
    m.TeacherQuestion, new { id = "questionInput", maxlength = 500 })
<span id="charsLeft"></span>

Next add a reference to jQuery and add the following Javascript to your layout view:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function () {
        $("#questionInput").keyup(function () {
            var charsLeft = $(this).attr("maxlength") - $(this).val().length;
            $("#charsLeft").text(charsLeft + " characters left");
        });
    });
</script>

(If you need to include the script in a normal view, please refer to this answer for guidance.)

The result should look something like this:

enter image description here

limit TextBox to 500 characters

1 Answers1