Characters Countdown Counter. JavaScript.

vicnumb May 31, 2013

May 31 2013 Published by under jQuery & JavaScript

Every script we work on, include text forms with characters counter and limit.

The basic requirements to this program are:

  • Pure JavaScript, no frameworks.
  • As simple as possible.
  • Count text field characters.
  • Display characters count in a separate field.
  • Stop counting on getting to 0 (zero).
  • Limit new characters input on getting to 0 (zero)

 

This is the simplest character counter coded in JavaScript. The jQuery Counter Class can be used for more complex solutions like characters count down, characters count up, words count up, words count down, Call back Ajax functions on achieving max/min, strict maximum count setting.

Basic JavaScript character counter description

 

HTML code consists of 2 text fields:
– text input form
– character counter input form (status = readonly)
– on text input form button click down or up, call javascript textCount function

CSS code:
– counter input form hidden borders, text and background customizations

JavaScript Code consists of a funtction:
– function params:
— text – text to count
— counter – counter current value
— max – maximum counter value
– on call function check if maximum number of characters if exceeded.
— If exceeded, new characters input stop, counter countdown stop to 0 (zero).
— If not exceeded, counter value is changed up or down

 

Character Countdown Counter Code Snippet

 

<script>
//Coded by: Victor Botez
//http://viescripts.com
//text counter, limit the number of characters in text area
//Use text counter function for multiple text areas on the page
<!--
function countText(text, counter, max) {
  // if text too long, cut it to max length
  if (text.value.length > max)
    text.value = text.value.substring(0, max);
  // update counter
  else
    counter.value = max - text.value.length;
}
// -->
</script>
<style>
  #counter{ border-color:#FFF; border-style:none; width:25px; height:20px; color:#FF0000; font-family:Verdana; font-weight:bold; background-color:#FFF; font-size:12px; }
</style>
 
<input name = "text" id="text" value="" size="50"
onKeyDown = "countText(document.getElementById('text'),document.getElementById('counter'),80)"
onKeyUp = "countText(document.getElementById('text'),document.getElementById('counter'),80)"
>
<input type="text" name="counter" id="counter" size="3" maxlength="3" value="80" readonly>

Enjoy!

One response so far

Leave a Reply