how do i use jquery to count the charecter left in a text box on asp.net mvc

Question

i am using asp.net core 2 to create a form, i want to count the number of characters left when the user is typing but its not working, so on the view i have tried this

<div id="counter" class="error"></div>
@Html.TextArea("Text2", new { @id = "Text2" })

and this

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/MaxLength.min.js"></script>
<script type="text/javascript">
    $(function () { 
        //Specifying the Character Count control explicitly.
        $("#Text2").MaxLength(
            {
                MaxLength: 15,
                CharacterCountControl: $('#counter')
            });

        });
    });

Check this linke. [Max Lenth](http://6edesign.github.io/maxLength/) — Uxmaan Ali, Mar 18 '19 at 13:07

score 1 · Answer 1 · edited Mar 26 '19 at 12:54

1

You just need to subtract the textarea length from 15.

See Count textarea characters for more details.

edited Mar 26 '19 at 12:54

Wai Ha Lee

8,598
83
57
92

answered Mar 18 '19 at 13:29

Sasan.R

105
10

score 1 · Answer 2 · answered Mar 18 '19 at 16:41

Did you include all related css and script?

I reproduce a demo about your MaxLength library. It work well.

 $(function () {
        //Normal Configuration.
        $("#TextBox1").MaxLength({ MaxLength: 10 });
 
        //Specifying the Character Count control explicitly.
        $("#TextBox2").MaxLength(
        {
            MaxLength: 15,
            CharacterCountControl: $('#counter')
        });
 
        //Disable Character Count.
        $("#TextBox3").MaxLength(
        {
            MaxLength: 20,
            DisplayCharacterCount: false
        });
    });

 <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    
    <!--[if lt IE 9]>
      <script type="text/javascript"  src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script>
    <![endif]-->
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://www.aspsnippets.com/demos/2649/MaxLength.min.js"></script>
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.24/themes/start/jquery-ui.css" type="text/css" />

<input type="text" id="TextBox1" style="width: 300px" value = "Mudassar Khan" />
<br />
<br />
<div id="counter" style="color:red;font-weight:bold"></div>
<input type="text" id="TextBox2" style="width: 300px" />
<br />
<br />
<input type="text" id="TextBox3" style="width: 300px" />

how do i use jquery to count the charecter left in a text box on asp.net mvc

2 Answers2