Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Count characters in textarea

People also ask

How many characters can textarea hold?

The HTML <Textarea>maxlength attribute is used to specify the maximum number of characters enters into the Textarea element. Attribute Value: number: It contains single value number which allows the maximum number of character in Textarea element. Its default value is 524288.

How do you count characters in a react?

We create a variable called characterCount which will hold our state, a function that will update it called setCharacterCount and we set the initial value of our characterCount to 0 (passing 0 to useState ). Finally, we get the total number of characters in the text area by using e. target. value.


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.

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

function countChar(val) {
  var len = val.value.length;
  if (len >= 500) {
    val.value = val.value.substring(0, 500);
  } else {
    $('#charNum').text(500 - len);
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>

⚠️ The accepted solution is flawed.

Here are two scenarios where the keyup event will not get fired:

  1. The user drags text into the textarea.
  2. 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:

JavaScript (demo):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", ({ currentTarget: target }) => {
  const maxLength = target.getAttribute("maxlength");
  const currentLength = target.value.length;

  if (currentLength >= maxLength) {
    return console.log("You have reached the maximum number of characters.");
  }

  console.log(`${maxLength - currentLength} chars left`);
});
<textarea maxlength='140'></textarea>

And if you absolutely want to use jQuery:

$('textarea').on("input", function() {
  var maxlength = $(this).attr("maxlength");
  var currentLength = $(this).val().length;

  if (currentLength >= maxlength) {
    return console.log("You have reached the maximum number of characters.");
  }

  console.log(maxlength - currentLength + " chars left");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea maxlength='140'></textarea>

Improved version based on Caterham's function:

$('#field').keyup(function () {
  var max = 500;
  var len = $(this).val().length;
  if (len >= max) {
    $('#charNum').text(' you have reached the limit');
  } else {
    var char = max - len;
    $('#charNum').text(char + ' characters left');
  }
});

HTML sample, used wherever I need a counter, notice the relevance of IDs of textarea and second span : id="post" <-> id="rem_post" and the title of the span that holds the desired characters amount of each particular textarea

<textarea class="countit" name="post" id="post"></textarea>
<p>
  <span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>

JavaScript function, usually placed before </body> in my template file, requires jQuery

$(".countit").keyup(function () {
  var cmax = $("#rem_" + $(this).attr("id")).attr("title");

  if ($(this).val().length >= cmax) {
    $(this).val($(this).val().substr(0, cmax));
  }

  $("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);

});

this worked fine for me.

$('#customText').on('keyup', function(event) {
   var len = $(this).val().length;
   if (len >= 40) {
      $(this).val($(this).val().substring(0, len-1));
   }
});