Count characters in textarea

Question

I want to count characters in a textarea  so I just made    lt textarea id  field  onkeyup  countChar this   gt  lt  textarea gt   function countChar val        var len   val value length       if  len  gt   500                  val value   val value substring 0  500          else                     charNum   text 500 - len               What s wrong with my piece of code  It does not work  Well  that was a newbie handwriting  need a help

User · Accepted Answer

What errors are you seeing in the browser? I can understand why your code doesn't work if what you posted was incomplete, but without knowing that I can't know for sure.

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countChar(val) {
        var len = val.value.length;
        if (len >= 500) {
          val.value = val.value.substring(0, 500);
        } else {
          $('#charNum').text(500 - len);
        }
      };
    </script>
  </head>

  <body>
    <textarea id="field" onkeyup="countChar(this)"></textarea>
    <div id="charNum"></div>
  </body>

</html>

... works fine for me.

Edit: You should probably clear the charNum div, or write something, if they are over the limit.

User · Answer

field   keyup function          var max   160      var len     this  val   length      var char   max - len      var messages   Math ceil len   160       if  len  gt   max                charNum   text       messages          len         max         else               charNum   text len         max

User · Answer

The accepted solution is flawed   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

Seems like the most reusable and elegant solution combines the abive to take MaxLength from the Input attribute and then reference the Span element with a predictable id     Then to use  all you need to do is add   countit  to the Input class and  counter      input-ID  to your span HTML  lt textarea class  quot countit quot  name  quot name quot  maxlength  6  id  quot post quot  gt  lt  textarea gt   lt span gt characters remaining   lt span id  quot counter name quot  gt  lt  span gt  lt  span gt   lt br gt   lt textarea class  quot countit quot  name  quot post quot  maxlength  20  id  quot post quot  gt  lt  textarea gt   lt span gt characters remaining   lt span id  quot counter post quot  gt  lt  span gt  lt  span gt   lt br gt   lt textarea class  quot countit quot  name  quot desc quot  maxlength  10  id  quot desc quot  gt  lt  textarea gt   lt span gt characters remaining   lt span id  quot counter desc quot  gt  lt  span gt  lt  span gt   Jquery    quot  countit quot   keyup function        var maxlength     this  attr  quot maxlength quot      var currentLength     this  val   length     if  currentLength  gt   maxlength           quot  counter  quot      this  attr  quot id quot    html currentLength           maxlength        else         quot  counter  quot      this  attr  quot id quot    html maxlength - currentLength    quot  chars left quot

User · Answer

Well  this is not that different from what have been said  but this works very well in all browsers   The idea is to delete any text which overflows the defined length   function countTextAreaChar txtarea  l       var len     txtarea  val   length      if  len  gt  l    txtarea  val   txtarea  val   slice 0  l        else     charNum   text l - len           The HTMl code would be    lt div id  charNum  gt  lt  div gt   lt textarea onkeyup  countTextAreaChar this  10   class  textareaclass  id  smallword  rows  40  cols  30  name  smallword  gt  lt  textarea gt

User · Answer

HTML sample  used wherever I need a counter  notice the relevance of IDs of textarea and second span   id  post   lt -  id  rem post  and the title of the span that holds the desired characters amount of each particular textarea   lt textarea class  countit  name  post  id  post  gt  lt  textarea gt   lt p gt     lt span gt characters remaining   lt span id  rem post  title  1000  gt  lt  span gt  lt  span gt   lt  p gt    JavaScript function  usually placed before  lt  body gt  in my template file  requires jQuery      countit   keyup function        var cmax       rem       this  attr  id    attr  title       if    this  val   length  gt   cmax          this  val   this  val   substr 0  cmax               rem       this  attr  id    text cmax -   this  val   length

User · Answer

A more generic version so you can use the function for more than one field    lt script src     site jquery jquery min js   gt  lt  script gt   lt script type  text javascript  gt   function countChar inobj  maxl  outobj        var len   inobj value length      var msg     chr left       if  len  gt   maxl            inobj value   inobj value substring 0  maxl             outobj  text 0   msg         else             outobj  text maxl - len   msg               document  ready function           set up summary field character count     countChar     summary   get 0  500    summarychrs      show inital value on page load         summary   keyup function             countChar this  500    summarychrs      set up on keyup event function               lt  script gt    lt textarea name  summary  id  summary  cols  60  rows  3   gt  lt  php echo  summary   gt  lt  textarea gt    lt span id  summarychrs  gt 0 lt  span gt

User · Answer

Your code was a bit mixed up  Here is a clean version    lt script type  text javascript  gt        document  ready function                 add   click function                   post  SetAndGet php                     know      know   val                  function data                        know list   html data                                        function countChar val                var len   val value length              if  len  gt   500                    val value   val value substring 0  500                 else                       charNum   text 500 - len                                    lt  script gt

User · Answer

this worked fine for me       customText   on  keyup   function event       var len     this  val   length     if  len  gt   40            this  val   this  val   substring 0  len-1

User · Answer

fn extend           limiter  function limit  elem                  this  on  keyup focus   function                    setCount this  elem                              function setCount src  elem                   var chars   src value length                  if  chars  gt  limit                        src value   src value substr 0  limit                       chars   limit                                    elem html  limit - chars                              setCount   this  0   elem                          var elem       cntr              status txt   limiter 160  elem

User · Answer

Keeping in mind what Etienne Martin says  you can use oninput  as it detects any change within texarea  Detect if you copy and paste text      textarea   on  input   function             var max   400          var len     this  val   length          var char   max - len          if  len  gt   max                    charNum   text   You have reached the character limit                     charNum   addClass  quot text-danger quot       optional  adding a class using bootstrap           else if  char  lt   10                    charNum   text char     You are reaching the character limit                     charNum   addClass  quot text-warning quot       optional  adding a class using bootstrap           else               var char   max - len                  charNum   text char     characters remaining                     charNum   addClass  quot text-success quot       optional  adding a class using bootstrap

User · Answer

HTML    lt form method  post  gt   lt textarea name  postes  id  textAreaPost  placeholder  Write what s you new  maxlength  500  gt  lt  textarea gt    lt div id  char namb  style  padding  4px  float  right  font-size  20px  font-family  Cocon  text-align  center   gt 500   0 lt  div gt   lt  form gt    jQuery    function            textAreaPost   keyup function          var charsno     this  val   length            char namb   html  500       charsno

User · Answer

substring   needs to become substr     Example  jsfiddle net xqyWV

User · Answer

We weren t happy with any of the purposed solutions   So we ve created a complete char counter solution for JQuery  built on top of jquery-jeditable  It s a textarea plugin extension that can count to both ways  displays a custom message  limits char count and also supports jquery-datatables   You can test it right away on JSFiddle   GitHub link  https   github com HippotecLTD realworld jquery jeditable charcount  Quick start  Add these lines to your HTML    lt script async src  https   cdn jsdelivr net gh HippotecLTD realworld jquery jeditable charcount 1 0 0 dist jquery jeditable charcounter realworld min js  gt  lt  script gt   lt script async src  https   cdn jsdelivr net gh HippotecLTD realworld jquery jeditable charcount 1 0 0 dist jquery charcounter realworld min js  gt  lt  script gt    And then       myTextArea4   charCounter

User · Answer

U can use           document  ready function            ID   keyup function         var val     this  val       len   val length     if  len  gt   140          this  text val substring 0  140         else       console log 140 - len           charNum   empty   append 140 - len

User · Answer

Try this one    lt textarea maxlength  410  name  about me  onkeydown  CountLeft this form about me  this form left    onkeyup  CountLeft this form about me this form left     gt  lt  textarea gt    lt input maxlength  3  name  left  readonly    size  3  type  text  value  410    gt  characters left   lt script gt  function CountLeft field  count         var max    410       if  field value length  gt  max                field value   field value substring 0  max             else               count value   max - field value length           lt  script gt

User · Answer

I created my own jQuery plugin for this task  you can try it out here   http   jsfiddle net Sk8erPeter 8NF4r   You can create character counters on-the-fly  and also remaining character counters   you can define whether you want to chop text  you can define the suffix texts and you can also define a short format and its separator   Here s an example usage     document  ready function               first textfield   characterCounter             second textfield   characterCounter           maximumCharacters  20          chopText  true                  third textfield   characterCounter           maximumCharacters  20          shortFormat  true          shortFormatSeparator                 positionBefore  true          chopText  true                  fourth textfield   characterCounter           maximumCharacters  20          characterCounterNeeded  true          charactersRemainingNeeded  true          chopText  false                  first textarea   characterCounter           maximumCharacters  50          characterCounterNeeded  true          charactersRemainingNeeded  false          chopText  true                  second textarea   characterCounter           maximumCharacters  25                Here s the code of the plugin          Character counter and limiter plugin for textfield and textarea form elements     author Sk8erPeter       function           fn characterCounter   function  params           merge default and user parameters     params     extend            define maximum characters       maximumCharacters  1000           create typed character counter DOM element on the fly       characterCounterNeeded  true           create remaining character counter DOM element on the fly       charactersRemainingNeeded  true           chop text to the maximum characters       chopText  false           place character counter before input or textarea element       positionBefore  false           class for limit excess       limitExceededClass   character-counter-limit-exceeded            suffix text for typed characters       charactersTypedSuffix    characters typed            suffix text for remaining characters       charactersRemainingSuffixText    characters left            whether to use the short format  e g  123 1000        shortFormat  false           separator for the short format       shortFormatSeparator             params           traverse all nodes     this each function            var  this     this            pluginElementsWrapper           characterCounterSpan           charactersRemainingSpan            return if the given element is not a textfield or textarea       if    this is  input type text     amp  amp    this is  textarea              return this                    create main parent div       if  params characterCounterNeeded    params charactersRemainingNeeded               create the character counter element wrapper          pluginElementsWrapper       lt div gt                 class    character-counter-main-wrapper                       if  params positionBefore               pluginElementsWrapper insertBefore  this             else              pluginElementsWrapper insertAfter  this                            if  params characterCounterNeeded             characterCounterSpan       lt span gt                 class    counter character-counter              text   0                      if  params shortFormat               characterCounterSpan appendTo  pluginElementsWrapper              var  shortFormatSeparatorSpan       lt span gt                   html   params shortFormatSeparator              appendTo  pluginElementsWrapper              else                create the character counter element wrapper           var  characterCounterWrapper       lt div gt                   class    character-counter-wrapper                html   params charactersTypedSuffix                           characterCounterWrapper prepend  characterCounterSpan              characterCounterWrapper appendTo  pluginElementsWrapper                            if  params charactersRemainingNeeded              charactersRemainingSpan       lt span gt                 class    counter characters-remaining              text   params maximumCharacters                      if  params shortFormat               charactersRemainingSpan appendTo  pluginElementsWrapper             else                create the character counter element wrapper           var  charactersRemainingWrapper       lt div gt                   class    characters-remaining-wrapper                html   params charactersRemainingSuffixText                          charactersRemainingWrapper prepend  charactersRemainingSpan              charactersRemainingWrapper appendTo  pluginElementsWrapper                             this keyup function               var typedText    this val            var textLength   typedText length          var charactersRemaining   params maximumCharacters - textLength              chop the text to the desired length         if  charactersRemaining  lt  0  amp  amp  params chopText               this val typedText substr 0  params maximumCharacters              charactersRemaining   0            textLength   params maximumCharacters                     if  params characterCounterNeeded               characterCounterSpan text textLength                      if  params charactersRemainingNeeded               charactersRemainingSpan text charactersRemaining              if  charactersRemaining  lt   0                if    charactersRemainingSpan hasClass params limitExceededClass                    charactersRemainingSpan addClass params limitExceededClass                             else                charactersRemainingSpan removeClass params limitExceededClass                                                    allow jQuery chaining     return this           jQuery

User · Answer

document  ready function         var count      h1   text   length      alert count         Also  you can put your own element id or class instead of  h1   and length event count your characters of text area string

User · Answer

lt script src  https   ajax googleapis com ajax libs jquery 1 11 2 jquery min js  gt  lt  script gt        lt script gt               function countChar val                               var limit   1024               if   val length  gt  limit                                      comment   val val substring 0  limit-1                  val length   limit                                     count   html  limit - val length                                   lt  script gt            lt textarea id  comment  onKeyUp  countChar this value   required gt  lt  textarea gt            lt div id  count  gt  lt  div gt    Use the following to skip using else and also skip getting negative count

User · Answer

Here my example  Supper simple  x000D   x000D    document  ready function     x000D         x000D          var textarea          my textarea    x000D     x000D          textarea keydown function event    x000D             x000D              var numbOfchars   textarea val    x000D              var len   numbOfchars length  x000D                  chars-counter   text len   x000D   x000D              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  my textarea  class  uk-textarea  rows  5  name  text  gt  lt  textarea gt  x000D   lt h1 class  chars-counter  gt 0 lt  h1 gt  x000D   x000D   x000D

User · Answer

Improved version based on Caterham s function       field   keyup function        var max   500    var len     this  val   length    if  len  gt   max            charNum   text   you have reached the limit        else       var char   max - len          charNum   text char     characters left

User · Answer

I was wondering how to do this same thing and taking ideas from everyone here this is what I came up with   JsFiddle   lt textarea name  message  rows  4  cols  24  maxlength  1000  id  message  placeholder  Message   style    gt  lt  textarea gt  lt br  gt   lt span id  charNum  gt  lt  span gt       message   keyup function        max   this getAttribute  maxlength      var len     this  val   length     if  len  gt   max            charNum   text   you have reached the limit         else       var char   max - len          charNum   text char     characters left

User · Answer

I did a combination of the above   It allows for the halting of the text entry  and allows for the backspacing  plus keeps the count  even when backspacing   JavaScript code     document  ready function             giftmsg   keypress function  event        var max   250      var len     this  val   length       if  event which  lt  0x20             e which  lt  0x20  then it s not a printable character          e which     0 - Not a character       return     Do nothing            if  len  gt   max          event preventDefault                        giftmsg   keyup function  event        var max   250      var len     this  val   length      var char   max - len           textleft   text char     characters left                  HTML    lt div class  col3  gt       lt h2 gt 3  Optional gift message lt  h2 gt      Enter gift message  Limit 250 characters  lt br   gt  lt br   gt       lt textarea cols  36  rows  5  id  giftmsg   gt  lt  textarea gt       lt a style  padding 7px 0 0 0  href     gt Save Message lt  a gt       lt div id  textleft  gt 250 characters left lt  div gt   lt  div gt    Credit to those posters before me    Hope this helps someone

[jquery] Count characters in textarea

Examples related to jquery

Examples related to textarea

Examples related to counter

Examples related to onkeyup