I needed to add some visual cues to the templates, and hit a problem. With the javascript code as distributed by a number of different sites, they all counted the characters using onkeyup and onkeydown to count the characters.
This had two problems.
1) cut/paste using the mouse did not increment the text count
and, most annoyingly,
2) on display of already filled in fields in the templates, the count was at the max, until a key was pressed in the box.
To get around that, I looked at using the templates to return the original length of the tag, but found there were few string handling tags, so had to come up with a simple global. (It would be nice to have length_of() function in the templates built in).
And, I added onmouseover to the list of event handlers, which *seems* (at least in MSIE) to give more responsive character counting. Since this all occurs on the users site, when the window is in focus, any sort of resource/cpu drain is not the server's problem ;)
It's actually kind of cool. I'll have this in the Ultra_Widgets eventually, but for now here 's how to do itl
<script language = "Javascript">
/**
* DHTML textbox character counter (IE4+) script.
* Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/
/**
Caution : If you find that when you are trying to use more then
one text box or text area the function doesn't work
then check to make sure that the property maxLength of the field
is spelt correctly (esp. capital L). You need to
change the name of the myCounter field if you use multiple text
boxes and also change the reference to it in the
event onKeyUp for the respective boxes.
**/
function taLimit() {
var taObj=event.srcElement;
if (taObj.value.length==taObj.maxLength*1) return false;
}
function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1);
if (visCnt) visCnt.innerText=taObj.maxLength-taObj.value.length;
}
</script>
This was from a java script site, and I used it pretty much "as is".
This is the form code you need to add to your <textarea....></textarea> tags.
myPhilosophy is the key tag, and all areas need to change to give a unique counter. The onMouseOut was just a test.
maxLength *MUST* be spelled with the capital "L".
The 250 is the max length you want. It can be anything..... that matches your database field.
You need to change it in two places, the counter itself maxLength, and the tags, where you subtract the length of the field from it.
The textarea/database field in my database was Photographers_Philosophy, so that should be changed to whatever your tag/field name is.
All the usual HTML, template ,and such rules apply. Only the on* functions and maxLength were added.
name="Photographers_Philosophy"
maxLength="250"
onkeypress="return taLimit()"
onkeyup="return taCount(myPhilosophy)"
onmouseout="return taCount(myPhilosophy)"
onmouseover="return taCount(myPhilosophy)" >
<%if Photographers_Philosophy%><%Photographers_Philosophy%><%endif%>
</textarea>
<br /><br />
You have <B><SPAN id=myPhilosophy>
<%if Photographers_Philosophy%><%'250' - length_of ($Photographers_Philosophy)%>
<%else%>250<%endif%>
</SPAN></B>
characters remaining for your description...
</font>
This is the global length_of you need to add to your globals.txt file, via the Template Globals editor.
return (length shift);
}
To have multiple counters on the page, just change the areas bolded to a unique name. I use the name of the submit field, with a my in front of it. Just keeps it simple. The javascript itself should not have to be changed.
REMEMBER: The global needs to be entered as displayed above, the first line can only have 5 characters "s, u, b, [space], and {" it's a quirky limit of Glinks/LinksSQL.
If you don't want to run it, a live demo will be in the Profile_Editor_Ultra plugin, when released.
Oh, just a post script here.
For those wondering, an onLoad event wouldn't work. So, by using the template parser when the page is initially displayed, we are sort of making our own "onLoad" event handler, setting the initial value of the <span>ed count field to the current length of the tag, or to the max value if the tag is empty. This only happens when the page is initially displayed, ONE time, so it's in effect, an onLoad replacement. The template tags are "gone" by the time the user sees it, and is typing, so to the javascript, it's as if you had just put the initial value of 250 (or whatever) in as in the original code.
PUGDOG� Enterprises, Inc.
The best way to contact me is to NOT use Email.
Please leave a PM here.
This had two problems.
1) cut/paste using the mouse did not increment the text count
and, most annoyingly,
2) on display of already filled in fields in the templates, the count was at the max, until a key was pressed in the box.
To get around that, I looked at using the templates to return the original length of the tag, but found there were few string handling tags, so had to come up with a simple global. (It would be nice to have length_of() function in the templates built in).
And, I added onmouseover to the list of event handlers, which *seems* (at least in MSIE) to give more responsive character counting. Since this all occurs on the users site, when the window is in focus, any sort of resource/cpu drain is not the server's problem ;)
It's actually kind of cool. I'll have this in the Ultra_Widgets eventually, but for now here 's how to do itl
Code:
<script language = "Javascript">
/**
* DHTML textbox character counter (IE4+) script.
* Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/
/**
Caution : If you find that when you are trying to use more then
one text box or text area the function doesn't work
then check to make sure that the property maxLength of the field
is spelt correctly (esp. capital L). You need to
change the name of the myCounter field if you use multiple text
boxes and also change the reference to it in the
event onKeyUp for the respective boxes.
**/
function taLimit() {
var taObj=event.srcElement;
if (taObj.value.length==taObj.maxLength*1) return false;
}
function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1);
if (visCnt) visCnt.innerText=taObj.maxLength-taObj.value.length;
}
</script>
This was from a java script site, and I used it pretty much "as is".
This is the form code you need to add to your <textarea....></textarea> tags.
myPhilosophy is the key tag, and all areas need to change to give a unique counter. The onMouseOut was just a test.
maxLength *MUST* be spelled with the capital "L".
The 250 is the max length you want. It can be anything..... that matches your database field.
You need to change it in two places, the counter itself maxLength, and the tags, where you subtract the length of the field from it.
The textarea/database field in my database was Photographers_Philosophy, so that should be changed to whatever your tag/field name is.
All the usual HTML, template ,and such rules apply. Only the on* functions and maxLength were added.
Code:
<textarea style="font-size: 10px; width: 300px; height: 100px;" name="Photographers_Philosophy"
maxLength="250"
onkeypress="return taLimit()"
onkeyup="return taCount(myPhilosophy)"
onmouseout="return taCount(myPhilosophy)"
onmouseover="return taCount(myPhilosophy)" >
<%if Photographers_Philosophy%><%Photographers_Philosophy%><%endif%>
</textarea>
<br /><br />
You have <B><SPAN id=myPhilosophy>
<%if Photographers_Philosophy%><%'250' - length_of ($Photographers_Philosophy)%>
<%else%>250<%endif%>
</SPAN></B>
characters remaining for your description...
</font>
This is the global length_of you need to add to your globals.txt file, via the Template Globals editor.
Code:
sub { return (length shift);
}
To have multiple counters on the page, just change the areas bolded to a unique name. I use the name of the submit field, with a my in front of it. Just keeps it simple. The javascript itself should not have to be changed.
REMEMBER: The global needs to be entered as displayed above, the first line can only have 5 characters "s, u, b, [space], and {" it's a quirky limit of Glinks/LinksSQL.
If you don't want to run it, a live demo will be in the Profile_Editor_Ultra plugin, when released.
Oh, just a post script here.
For those wondering, an onLoad event wouldn't work. So, by using the template parser when the page is initially displayed, we are sort of making our own "onLoad" event handler, setting the initial value of the <span>ed count field to the current length of the tag, or to the max value if the tag is empty. This only happens when the page is initially displayed, ONE time, so it's in effect, an onLoad replacement. The template tags are "gone" by the time the user sees it, and is typing, so to the javascript, it's as if you had just put the initial value of 250 (or whatever) in as in the original code.
PUGDOG� Enterprises, Inc.
The best way to contact me is to NOT use Email.
Please leave a PM here.
[NEW] Count/limit/display characters in text field