How to set the textarea input letters counter

Question

I've an textarea with a specific width and height so how do I create a letter counter and set the maximum letters typed in the textarea should not be more than 100 words.

HTML

<div class="box">
<textarea name="" id=""></textarea>
<div class="word-counter">0/100</div>
</div>

CSS

.box {
width:500px;
border: 1px solid red;
position:relative;
display:table;
}
textarea {
width:500px;
height:80px;
padding-bottom: 20px;
}
.word-counter {
position:absolute;
bottom: 0;
right:0;
}

similar functionality has been discussed here: http://stackoverflow.com/questions/30332301/jquery-textarea-character-countdown-on-page-load/30332436#30332436 — JGV, May 20 '15 at 05:15

Shaunak D · Accepted Answer · 2015-05-20T05:15:02.373

3

Use .keyup() for counting letters.

$('#area').keyup(function(){
    $('.word-counter').text($.trim(this.value.length)+'/100');
})

And maxlength attribute for max letters.

<div class="box">
<textarea name="" id="area" maxlength="100"></textarea>
<div class="word-counter">0/100</div>
</div>

Demo Fiddle

*Note : This supports spaces. If you need to handle just letter count the keyup() can be manipluated.

$('#area').keyup(function(){
    $('.word-counter').text(this.value.replace(/ /g,'').length+'/100');
})

Fiddle _{(Spaces ignored in letter count)}

edited May 20 '15 at 05:15

answered May 20 '15 at 05:08

Shaunak D

20,588
10
46
79

Can you do me a favor – Firnas May 20 '15 at 05:39
I'm using this plugin http://tympanus.net/codrops/2014/04/01/minimal-form-interface/ So when I embed textarea its not working. I mean its not validating and its not going forward – Firnas May 20 '15 at 05:44
I have no idea about the plugin. You can post a new question on Stackoverflow or check the Plugin DOCS – Shaunak D May 20 '15 at 05:52
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78403/discussion-between-mohamed-and-shaunak-d). – Firnas May 21 '15 at 11:18
Can you come to chatroom – Firnas May 21 '15 at 11:20

score 3 · Answer 2 · answered May 20 '15 at 05:09

3

You could simply use maxlength but, this means you are placing a character limit not a word limit on it. If you are asking for a word limit you will need to implement JavaScript.

Personally, I just set my character limit to about 1,000 or as much as I want the comment/message box to expand in height.

HTML

<div class="box">
<textarea name="" id="" maxlength="50"></textarea>
<div class="word-counter">0/100</div>
</div>

answered May 20 '15 at 05:09

ARLCode

651
6
20

This does not answer the question – Sami Kuhmonen May 20 '15 at 05:39
Welp, didn't realize he wanted jQuery. I just was speaking about HTML. – ARLCode May 20 '15 at 05:47
It's not about jQuery, they asked for a letter counter, not how to limit the textarea. – Sami Kuhmonen May 20 '15 at 05:48
1

Yep, I apologize. I'm just reading the questions and giving answers, I will have to slow down, obviously, and read more thoroughly. – ARLCode May 20 '15 at 05:49

score 2 · Answer 3 · answered May 20 '15 at 05:04

2

You can cal a function like this:

function countwords(str){
  var count = 0;
  str=str.trim();
  for (var i = 0; i <= str.length; i++) {
     if (str.charAt(i) == " ") {
        count ++;
      }
  }
  return count;
}

answered May 20 '15 at 05:04

Brijesh Bhatt

3,810
3
18
34

Manoj · Answer 4 · 2015-05-20T05:18:58.270

1

Try this

$('#text').keydown(function(e){
    var code=e.keyCode;
    var length=$(this).val().split(' ').length;
    if(length<=100)
    {
        $('.word-counter').text(length+'/100');
    }
    else
    {
        if(code!=37&&code!=38&&code!=39&&40&&code!=8&&code!=46)
        {
        return false;
        }
    }
});

Working Demo

edited May 20 '15 at 05:18

answered May 20 '15 at 05:05

Manoj

4,951
2
30
56

2

you might need to check whether key pressed is `backspace` or `delete` or `arrow keys` etc. Or else this might cause problem! Just a word of suggestion.. :) – Guruprasad J Rao May 20 '15 at 05:08
not working properly when backspace is pressed – Lenzman Mar 04 '20 at 07:05

score 0 · Answer 5 · answered May 20 '15 at 05:28

$('#text').keyup(function(e) {
    var length=parseInt($(this).val().length)+1;
     switch (e.keyCode) {
            case 8:  // Backspace
            length--;
             $('.word-counter').text(length+'/100');
             break;
            case 9:  // Tab
            case 13: // Enter
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down
            break;

            default:
                 if(length<=100)
                {
                    $('.word-counter').text(length+'/100');
                }
                else
                {
                    return false;
                }
        }         
    });

Use keyup() for letters counting
this is its working demo Working Demo

How to set the textarea input letters counter

HTML

CSS

5 Answers5