Count textarea characters

Question

I am developing a character count for my textarea on this website  Right now  it says NaN because it seems to not find the length of how many characters are in the field  which at the beginning is 0  so the number should be 500  In the console in chrome developer tools  no error occur  All of my code is on the site  I even tried to use jQuery an regular JavaScript for the character count for the textarea field  but nothing seems to work   Please tell me what I am doing wrong in both the jQuery and the JavaScript code I have in my contact js file     document  ready function         var tel1   document forms  form   elements tel1      var tel2   document forms  form   elements tel2      var textarea   document forms  form   elements textarea      var clock   document getElementById  clock        var count   document getElementById  count         tel1 addEventListener  keyup   function  e           checkTel tel1 value  tel2                tel2 addEventListener  keyup   function  e           checkTel tel2 value  tel3                      textarea   keyup function            var length   textarea length          console log length           var charactersLeft   500 - length          console log charactersLeft           count innerHTML    Characters left      charactersLeft          console log  Characters left      charactersLeft                          textarea addEventListener  keypress   textareaLengthCheck textarea   false        function checkTel input  nextField        if  input length    3            nextField focus          else if  input length  gt  0            clock style display    block             function textareaLengthCheck textarea        var length   textarea length      var charactersLeft   500 - length      count innerHTML    Characters left      charactersLeft

User · Answer

This solution will respond to keyboard and mouse events, and apply to initial text.

_x000D_

    $(document).ready(function () {_x000D_
        $('textarea').bind('input propertychange', function () {_x000D_
            atualizaTextoContador($(this));_x000D_
        });_x000D_
_x000D_
        $('textarea').each(function () {_x000D_
            atualizaTextoContador($(this));_x000D_
        });_x000D_
    });_x000D_
_x000D_
    function atualizaTextoContador(textarea) {_x000D_
        var spanContador = textarea.next('span.contador');_x000D_
        var maxlength = textarea.attr('maxlength');_x000D_
        if (!spanContador || !maxlength)_x000D_
            return;_x000D_
        var numCaracteres = textarea.val().length;_x000D_
        spanContador.html(numCaracteres + ' / ' + maxlength);_x000D_
    }

_x000D_

    span.contador {_x000D_
        display: block;_x000D_
        margin-top: -20px;_x000D_
    }

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<textarea maxlength="100" rows="4">initial text</textarea>_x000D_
<span class="contador"></span>

_x000D_

User · Answer

x000D   x000D  var maxchar   10  x000D      message   after   lt span id  count  class  counter  gt  lt  span gt     x000D      count   html maxchar   of   maxchar   x000D      message   attr  maxlength   maxchar   x000D      message   parent   addClass  wrap-text    x000D      message   on  keydown   function e   x000D   var len        message   val   length  x000D   if  len  gt   maxchar  amp  amp  e keyCode    8  x000D       e preventDefault    x000D   else if len  lt   maxchar  amp  amp  e keyCode    8   x000D    if len  lt   maxchar  amp  amp  len    0  x000D            count   html maxchar   of    maxchar - len  1    x000D       else if len    0  x000D            count   html maxchar   of    maxchar - len    x000D    else x000D         count   html maxchar   of    maxchar - len-1     x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt textarea id  message  name  text  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

textarea addEventListener  keypress   textareaLengthCheck textarea   false     You are calling textareaLengthCheck and then assigning its return value to the event listener  This is why it doesn t update or do anything after loading  Try this   textarea addEventListener  keypress  textareaLengthCheck false     Aside from that   var length   textarea length    textarea is the actual textarea  not the value  Try this instead   var length   textarea value length    Combined with the previous suggestion  your function should be   function textareaLengthCheck         var length   this value length         rest of code

User · Answer

textarea   keyup function          count   text   this  val   length         The above will do what you want  If you want to do a count down then change it to this       textarea   keyup function          count   text  Characters left       500 -   this  val   length          Alternatively  you can accomplish the same thing without jQuery using the following code   Thanks  Niet   document getElementById  textarea   onkeyup   function        document getElementById  count   innerHTML    Characters left       500 - this value length

User · Answer

The accepted solution is outdated   Here are two scenarios where the keyup event will not get fired    The user drags text into the textarea  The user copy-paste text in the textarea with a right click  contextual menu     Use the HTML5 input event instead for a more robust solution    lt textarea maxlength  140  gt  lt  textarea gt    JavaScript  demo    const textarea   document querySelector  textarea     textarea addEventListener  input   event   gt        const target   event currentTarget      const maxLength   target getAttribute  maxlength        const currentLength   target value length       if  currentLength  gt   maxLength            return console log  You have reached the maximum number of characters                console log    maxLength - currentLength  chars left          And if you absolutely want to use jQuery      textarea   on  input   function        var maxlength     this  attr  maxlength        var currentLength     this  val   length       if  currentLength  gt   maxlength            console log  You have reached the maximum number of characters          else          console log maxlength - currentLength     chars left

User · Answer

I found that the accepted answer didn t exactly work with textareas for reasons noted in Chrome counts characters wrong in textarea with maxlength attribute because of newline and carriage return characters  which is important if you need to know how much space would be taken up when storing the information in a database  Also  the use of keyup is depreciated because of drag-and-drop and pasting text from the clipboard  which is why I used the input and propertychange events  The following takes newline characters into account and accurately calculates the length of a textarea    x000D   x000D    function     x000D        myTextArea   on  input propertychange   function event    x000D      var curlen     this  val   replace   r    n   n    r  g    r n   length  x000D   x000D          counter   html curlen   x000D        x000D      x000D   x000D      counter   text     myTextArea   val   replace   r    n   n    r  g    r n   length   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt textarea id  myTextArea  gt  lt  textarea gt  lt br gt  x000D  Size   lt span id  counter    gt  x000D   x000D   x000D

User · Answer

document  ready function             characterLeft   text  140 characters left            message   keydown function              var max   140          var len     this  val   length          if  len  gt   max                    characterLeft   text  You have reached the limit                    characterLeft   addClass  red                    btnSubmit   addClass  disabled                                   else               var ch   max - len                  characterLeft   text ch     characters left                    btnSubmit   removeClass  disabled                    characterLeft   removeClass  red

User · Answer

For those wanting a simple solution without jQuery  here s a way   textarea and message container to put in your form    lt textarea onKeyUp  count it    id  text  name  text  gt  lt  textarea gt  Length  lt span id  counter  gt  lt  span gt    JavaScript    lt script gt  function count it         document getElementById  counter   innerHTML   document getElementById  text   value length    count it     lt  script gt    The script counts the characters initially and then for every keystroke and puts the number in the counter span   Martin

User · Answer

They say IE has issues with the input event but other than that  the solution is rather straightforward    x000D   x000D  ta   document querySelector  textarea    x000D  count   document querySelector  label    x000D   x000D  ta addEventListener  input   function  e    x000D    count innerHTML   this value length  x000D      x000D   lt textarea id  my-textarea  rows  4  cols  50  maxlength  10  gt  x000D   lt  textarea gt  x000D   lt label for  my-textarea  gt  lt  label gt  x000D   x000D   x000D

User · Answer

Here is simple code  Hope it is working   x000D   x000D    document  ready function     x000D  var text max   99  x000D      textarea feedback   html text max     characters remaining    x000D   x000D      textarea   keyup function     x000D      var text length       textarea   val   length  x000D      var text remaining   text max - text length  x000D   x000D          textarea feedback   html text remaining     characters remaining    x000D      x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt textarea id  textarea  rows  8  cols  30  maxlength  99   gt  lt  textarea gt  x000D   lt div id  textarea feedback  gt  lt  div gt  x000D   x000D   x000D

User · Answer

This code gets the maximum value from the maxlength attribute of the textarea and decreases the value as the user types    lt DEMO    x000D   x000D  var el t   document getElementById  textarea    x000D  var length   el t getAttribute  maxlength    x000D  var el c   document getElementById  count    x000D  el c innerHTML   length  x000D  el t onkeyup   function      x000D    document getElementById  count   innerHTML    length - this value length   x000D     x000D   lt textarea id  textarea  name  text  x000D   maxlength  500  gt  lt  textarea gt  x000D   lt span id  count  gt  lt  span gt  x000D   x000D   x000D

[javascript] Count textarea characters

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to textarea

Examples related to charactercount