Count and display number of characters in a textbox using Javascript

Question

I am working on a project that requires me to count the number of characters entered in a text box and dynamically display the result elsewhere on the page.

As I said, this would preferably be done in jQuery or Javascript.

Thanks in advance.

derosm2 · Accepted Answer · 2015-12-15 16:32:24Z

64

You could do this in jQuery (since you said you preferred it), assuming you want the character count displayed in a div with id="characters":

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
    var cs = $(this).val().length;
    $('#characters').text(cs);
}

UPDATE: jsFiddle (by Dreami)

UPDATE 2: Updating to include keydown for long presses.

edited Dec 15, 2015 at 16:32

derosm2

1682 silver badges5 bronze badges

answered Mar 19, 2012 at 9:18

Alejandro Urbano Alvarez

3,3361 gold badge27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dreami Over a year ago

If someone wants to try this out (like me), I made a jsFiddle: jsfiddle.net/hNn5b

Fred Over a year ago

This won't trigger on right-click and paste. You can use $('textarea').on('input', updateCount);

Benjamin Over a year ago

don't windows platforms count a linebreak as 2 charcters? In the example it is counted as one.

Clyde Lobo · Accepted Answer · 2012-03-19 09:24:06Z

11

<script type="text/javascript">
function countChars(countfrom,displayto) {
  var len = document.getElementById(countfrom).value.length;
  document.getElementById(displayto).innerHTML = len;
}
</script>

<textarea id="data" cols="40" rows="5"
onkeyup="countChars('data','charcount');" onkeydown="countChars('data','charcount');" onmouseout="countChars('data','charcount');"></textarea><br>
<span id="charcount">0</span> characters entered.

Plain Javascript.

answered Mar 19, 2012 at 9:24

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

1 Comment

jakobinn Over a year ago

This is correct but I want to note that it's better to use .textContent instead of .innerHTML if you're adding text content to an element since innerHTML parses data as HTML while .textContent uses straight text which is faster.

stkmedia · Accepted Answer · 2016-02-09 22:14:45Z

11

This is my preference:

<textarea></textarea>         
<span id="characters" style="color:#999;">400</span> <span style="color:#999;">left</span>

Then jquery block

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
var cs = [400- $(this).val().length];
$('#characters').text(cs);
}

answered Feb 9, 2016 at 22:14

stkmedia

1592 silver badges12 bronze badges

1 Comment

Fred Over a year ago

This won't trigger on right-click and paste. You can use $('textarea').on('input', updateCount);

Pranesh Janarthanan · Accepted Answer · 2016-03-02 06:18:38Z

I would like to share my answer which i used in my project and it is working fine.

<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Rows="4" Columns="50" placeholder="Maximum limit: 100 characters"></asp:TextBox><br />
<span id="spnCharLeft"></span>

<script type='text/javascript'>
    $('#spnCharLeft').css('display', 'none');
    var maxLimit = 100;
    $(document).ready(function () {
        $('#<%= txtComments.ClientID %>').keyup(function () {
            var lengthCount = this.value.length;              
            if (lengthCount > maxLimit) {
                this.value = this.value.substring(0, maxLimit);
                var charactersLeft = maxLimit - lengthCount + 1;                   
            }
            else {                   
                var charactersLeft = maxLimit - lengthCount;                   
            }
            $('#spnCharLeft').css('display', 'block');
            $('#spnCharLeft').text(charactersLeft + ' Characters left');
        });
    });
</script>

Source: URL

JB. · Accepted Answer · 2013-10-04 12:09:48Z

3

Though it has been already solved, I'm interested to share something that I have used in one of my projects:

<textarea id="message" cols="300" rows="200" onkeyup="countChar(this)"
          placeholder="Type your message ..." >
</textarea>

<input id="text-character" class="input-mini uneditable-input"
       placeholder="0 Chars" readonly />
<input id="text-parts" class="input-mini uneditable-input"
       placeholder="0 Parts" readonly />
<input id="text-remaining" class="input-medium uneditable-input"
       placeholder="160 Chars Remaining" readonly />

Javascript code:

function countChar(val) {

    var len = val.value.length;
    var ctext = len + " Chars";

    var str = val.value;
    var parts = [];
    var partSize = 160;

    while (str) {
        if (str.length < partSize) {
            var rtext = (partSize - str.length) + " Chars Remaining";
            parts.push(str);
            break;
        }
        else {
            parts.push(str.substr(0, partSize));
            str = str.substr(partSize);
        }



    }
    var ptext = parts.length + " Parts";

    $('#text-character').val(ctext);
    $('#text-parts').val(ptext);
    $('#text-remaining').val(rtext);

}

edited Oct 4, 2013 at 12:09

JB.

42.5k13 gold badges83 silver badges109 bronze badges

answered Oct 4, 2013 at 11:47

Naima

966 bronze badges

2 Comments

unidha Over a year ago

I tried this in JSFiddle but it didn't work.Any idea why?

Cameron Yick Over a year ago

@unidha you need to include Jquery as well since the $ sign on the bottom 3 lines signifies that Jquery is used to select elements.

ApprenticeHacker · Accepted Answer · 2012-03-19 09:21:37Z

2

<script Language="JavaScript">
<!-- 
function Length_TextField_Validator()
{
   var len = form_name.text_name.value.length; //the length
   return (true);
}
-->
</script>

<form name="form_name" method="get" action="http://www.codeave.com/html/get.asp" 
onsubmit="return Length_TextField_Validator()">
<input type="text" name="text_name">
<input type="submit" value="Submit">
</form>

Source(s) : Text Validation

answered Mar 19, 2012 at 9:21

ApprenticeHacker

22.2k30 gold badges107 silver badges154 bronze badges

Collectives™ on Stack Overflow

Count and display number of characters in a textbox using Javascript

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related