0 Replies - 1010 Views - Last Post: 03 September 2011 - 05:42 AM

#1 nathanpc  Icon User is offline

  • SCIENCE!
  • member icon

Reputation: 113
  • View blog
  • Posts: 1,171
  • Joined: 31-July 09

[jQuery] Field Character Counter

Posted 03 September 2011 - 05:42 AM

Description: This simple code will count the characters on a <textarea> and output it to a <label> very fast. Just like Twitter does.

Look at the HTML example to understand how to implement it.A field counter like Twitter does count the characters
function textCounter(field, cntField, maxLimit) {
   cntField.innerHTML = maxLimit - field.value.length;

   if (field.value.length > 120) {
      $("#label").css("color", "#ff0034");
   } else if (field.value.length > 100) {
      $("#label").css("color", "#ff6025");
   } else {
      $("#label").css("color", "#3e3e3e");
   }
}





// HTML example

<textarea name="postInput" class="postInput" id="postInput" rows="5" required onkeydown="textCounter(document.postBox.postInput, document.getElementById('label'), 140)" onkeyup="textCounter(document.postBox.postInput, document.getElementById('label'), 140)"></textarea>
<label for="postInput" id="label" name="countLabel">140</label>


Is This A Good Question/Topic? 0
  • +

Page 1 of 1