Javascript Character Counter

[BlueDevil23]

Here a few little functions I made to use with a form, to tell the user how many characters they have left. Obviously, they can bypass this without JS turned off, so make sure to check the length of the submitted string, server-side also!




/**
* xBrowser_getID returns the supplied elements ID
*
* This is basically a cross-browser version of get.ElementById()
*
* @param string supplied_ID This is the element you want to get the ID of.
* @return The ID of the supplied element.
* @type string
*
*/
function xBrowser_getID(supplied_ID)
{
var ID = null;

if(document.layers)
{
ID = document.layers[supplied_ID];
}
else if(document.all)
{
ID = document.all[supplied_ID];
}
else if(document.getElementById)
{
ID = document.getElementById(supplied_ID);
}
return ID;
}

/**
* fillCounter is meant to be used in conjunction with characterCounter, to prefill.
*
* fillCounter finds the element provided, and counts the number of characters
* in it. It then finds the element with the counterID and fills it with the
* correct number depending on the maximum allowed characters. This function is
* meant to be used after document execution and without any user interaction --
* to simply prefill the element, for better presentation.
*
* @requires xBrowser_getID() Requires this function to get the ID of the supplied element.
*
* @param string elementID Element that you are counting the characters in.
* @param string counterID Element that is updated with the characters left.
* @param integer max_allowed_chars The maximum amount of characters allowed in the elementID.
*
*/
function fillCounter(elementID, counterID, max_allowed_chars)
{
var element = xBrowser_getID(elementID);
var counterElement = xBrowser_getID(counterID);

counterElement.innerHTML = max_allowed_chars - element.value.length;
}

// Example: fillCounter('profileSig', 'lettersLeft', 300);


/**
* characterCounter sets a value to be counted up and down.
*
* characterCounter finds the element provided, and sets the max characters allowed
* in it. It is meant to be used with the onkeyup and onkeydown event handlers
* When the user either keys up or down, it will decrease the character count
* by the amount of character written. If the characters exceed the maximum
* allowed, it will subtract them from the input, and bring them back down to
* the allowed amount.
*
* @requires xBrowser_getID() Requires this function to get the ID of the supplied element.
*
* @param string elementID Element that you are counting the characters in.
* @param string counterID Element that is updated with the characters left.
* @param integer max_allowed_chars The maximum amount of characters allowed in the elementID.
*
*/
function characterCounter(elementID, counterID, max_allowed_chars)
{
var element = xBrowser_getID(elementID);
var counterElement = xBrowser_getID(counterID);

if(element.value.length > max_allowed_chars) {
element.value = element.value.substring(0, max_allowed_chars);
}
else {
counterElement.innerHTML = max_allowed_chars - element.value.length;
}
}


Usage:



<form action="#" method="POST" id="dummy_form">
<textarea row="5" cols="60" id="dummy_text" onkeyup="characterCounter('dummy_text', 'counter', 300);" onkeydown="characterCounter('dummy_text', 'counter', 300);"> Heya MakeWebGames </textarea>
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<span id="counter"></span>

<script type="text/javascript">
fillCounter('dummy_text', 'counter', 300);
</script>

[reek13]

havent used it but it seems pretty good

[BlueDevil23]

mdshare was kind enough to lend me some server space, and I set up an example:

http://www.browsergames.be/counter_example.html

[Floydian]

Kudos for posting that code blueDevil. Might I suggest packaging it as an object? That would allow the function names to be cleaned up a bit.


var textCount = {
getID: function (supplied_ID)
{
var ID = null;

if(document.layers)
{
ID = document.layers[supplied_ID];
}
else if(document.all)
{
ID = document.all[supplied_ID];
}
else if(document.getElementById)
{
ID = document.getElementById(supplied_ID);
}
return ID;
},

fill: function (elementID, counterID, max_allowed_chars)
{
var element = this.getID(elementID);
var counterElement = this.getID(counterID);

counterElement.innerHTML = max_allowed_chars - element.value.length;
},


create: function (elementID, counterID, max_allowed_chars)
{
var element = this.getID(elementID);
var counterElement = this.getID(counterID);

if(element.value.length > max_allowed_chars) {
element.value = element.value.substring(0, max_allowed_chars);
}
else {
counterElement.innerHTML = max_allowed_chars - element.value.length;
}
}
}

// textCount.create('foo', 'bar', 20);
// textCount.fill('foo', 'bar', 20);

[a_bertrand]

So far, I didn't encountered any "modern" browsers which doesn't support the "getElementById" function. So your first function seems a bit just too much work for nothing. Also, why have it on "onKeyDown" and "onKeyUp" event? Why not simply onKeyPress or onKeyUp alone?

[BlueDevil23]

@Floydian

Thanks for the tips. Javascript is really an area I would like to improve in.

@Alain

Internet Explorer has problems with getElementById().

And on the event... meh either of your proposed choices would be fine. I have no real reason I did it, just for completeness.

[a_bertrand]

IE doesn't have ANY problem with getElementById, and I can assure you about it as I always use getElementById and my game fully works with both IE and FF.

[BlueDevil23]

IE 8 doesn't (I believe). IE 6 and 7 search for both ID *and* the name attribute when using getElementById(). The easy way to get around that is not using the same ID and the same name on different elements.... but that's not always the case.

[a_bertrand]

Sorry but who would use the same NAME and ID on 2 different objects? Never saw it, never had it... so that's why for me getElementById always worked :D

Anyhow thanks for pointing me this issue as I was totally unaware of it. Even if maybe I will not need it now, you never knows.

[BlueDevil23]

Not the same ID *and* name on different objects, but say you have a form... you give the form the an ID of foo... but then end up naming one of the input foo... it's going to create problems.

[a_bertrand]

Yes that's what I meant :D

[Floydian]

Not the same ID *and* name on different objects, but say you have a form... you give the form the an ID of foo... but then end up naming one of the input foo... it's going to create problems.

And that's an excellent reason, in general, to use a javascript library since these browser incompatibilities are taken care of for you.