BlueDevil23 Posted September 18, 2009 Share Posted September 18, 2009 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! [js] /** * 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; } } [/js] 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> Quote Link to comment Share on other sites More sharing options...
reek13 Posted September 19, 2009 Share Posted September 19, 2009 havent used it but it seems pretty good Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted September 19, 2009 Author Share Posted September 19, 2009 mdshare was kind enough to lend me some server space, and I set up an example: http://www.browsergames.be/counter_example.html Quote Link to comment Share on other sites More sharing options...
Floydian Posted September 20, 2009 Share Posted September 20, 2009 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. [js] 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); [/js] Quote Link to comment Share on other sites More sharing options...
a_bertrand Posted September 20, 2009 Share Posted September 20, 2009 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? Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted September 20, 2009 Author Share Posted September 20, 2009 @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. Quote Link to comment Share on other sites More sharing options...
a_bertrand Posted September 20, 2009 Share Posted September 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted September 20, 2009 Author Share Posted September 20, 2009 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. Quote Link to comment Share on other sites More sharing options...
a_bertrand Posted September 21, 2009 Share Posted September 21, 2009 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. Quote Link to comment Share on other sites More sharing options...
BlueDevil23 Posted September 21, 2009 Author Share Posted September 21, 2009 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. Quote Link to comment Share on other sites More sharing options...
a_bertrand Posted September 21, 2009 Share Posted September 21, 2009 Yes that's what I meant :D Quote Link to comment Share on other sites More sharing options...
Floydian Posted September 22, 2009 Share Posted September 22, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.