Count Textarea Characters

Count characters in textarea

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>

How can I count the characters from a textarea?

The keydown event fires before the value in the field has been updated. As such your JS is displaying the character calculation from the previous keypress. keyup is the better choice of the two.

However, that being said, you should use the input event instead as it covers all cases where the value of the field changes which keydown/keyup don't - for example copy & paste using the mouse.

Also note that jQuery 1.5 is massively outdated - over 10 years old in fact. You should be using the latest version which at time of answering is 3.6. In addition using onX event attributes is no longer good practice. Look to attach your event handlers unobtrusively without including any JS in the HTML. As you're using jQuery already you can use the on() method to do that

With all that said, try this:

jQuery($ => {
  const $charNum = $('#charNum');

  $('#field').on('input', e => {
    let len = e.target.value.length;
    $charNum.text(800 - len);
  }).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id='id_text' class="control-group">
  <label for="id_text" class="control-label">Text</label>
  <div class="controls">
    <label for="field"></label>
    <textarea id="field" maxlength="800"></textarea>
  </div>
  <span>Char Left:</span> <span id="charNum"> </span>
</div>

Count textarea characters

$("#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);
};

Javascript counting remaining characters in textarea

I understand you are new to javaScript. But in your code you mix jquery with javascript so you have some errors because of that.

.onkeyup(function() is a javascript function = on('keyup', function(){} in jquery

textContent is pure javascript = text( in jquery.

Also, please check developer's console in the browser. That's the first place you look when something is not working

$('textarea').on('keyup',function(){

  var characterCount = $(this).val().length,
    current = $('#current'),
    maximum = $('#maximum'),
    theCount = $('#the-count');

  current.text(characterCount);

  if (characterCount < 100) {
    current.css('color', '#666');
  }
  if (characterCount > 99 && characterCount < 140) {
    current.css('color', '#6d5555');
  }
  if (characterCount > 139 && characterCount < 200) {
    current.css('color', '#793535');
  }
  if (characterCount > 199 && characterCount < 250) {
    current.css('color', '#841c1c');
  }
  if (characterCount > 249 && characterCount < 299) {
    current.css('color', '#8f0001');
  }

  if (characterCount >= 300) {
    maximum.css('color', '#8f0001');
    current.css('color', '#8f0001');
    theCount.css('font-weight', 'bold');

  } else {
    maximum.css('color', '#666');
    theCount.css('font-weight', 'normal');
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="Inhalt" id="Inhalt" placeholder="Ihre Nachricht..." rows="5" maxlength="300"></textarea>
<div id="the-count">
 <span id="current">0</span>
 <span id="maximum">/ 300</span>
</div>

Get textarea character count using reactjs with help of usestate hook

import React from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <textarea
        type="text"
        rows={5}
        className="full_height_Width"
        onChange={e => setCount(e.target.value.length)}
      />
      <p>{count}</p>
    </div>
  );
}

CodeSandBox

Angular: Show Text Area Character Count INSIDE the textarea

you can add container to the textarea with

position: relative

and then put your counter inside the same relative parent with

 position:absolute

and control position by top and right properties.

<td>
<div class="textarea-wrapper">
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span class="remaning">{{remainingText}}</span>
</div>
 </td>

and in css :

.textarea-wrapper {
   position:relative;
}
.remaning {
position:absolute;
bottom: 10px;
right:10px;
}

JQuery text area character count

Two issues are there:

1. .on('keyup paste' remove comma from here
2. $("#textfield").val().replace here $ is missing from the selector.

     $(document).ready(function() {            $("#textfield").on('keyup paste', function(){ // <---remove ',' comma
            var Characters = $("#textfield").val().replace(/(<([^>]+)>)/ig,"").length; // '$' is missing from the selector
            $("#counter").text("Characters left: " + (1500 - Characters));
        });    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form  id="input_form"  method="POST" action="?"> <textarea  id="textfield"></textarea></form>
<div id="counter"></div>

Textarea Character Count using JavaScript

The variable textarea is not present in the function's scope, you can refere to it with the this keyword

function textareaLengthCheck() {
    var length = this.value.length;
    var charactersLeft = 500 - length;
    var count = document.getElementById('count');
    count.innerHTML = "Characters left: " + charactersLeft;
}

---

Related Topics