Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

[NEW] Count/limit/display characters in text field

Quote Reply
[NEW] Count/limit/display characters in text field
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


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.

Last edited by:

pugdog: Mar 26, 2006, 7:11 AM
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
Has anyone tried this?

I think it's pretty cool, and what I've been looking for for awhile.

It allows you to do things in the templates, rather than having to do it in the back-end code. Sometimes, that is what you need, and for checking and limiting user input, as well as giving them feedback on what they are putting in, it's pretty cool.

You can have your templates limit your users to inputting only a certain amount of text, without having to have a hook into the add or update routines.

Just curious.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
Pugdog,

Where does the code go?

This is what I have:

<div class="row clear">
<label for="Description" class="name">Description:</label>
<div class="value">
<textarea id="Description" name="Description" rows="3" cols="42"><%if Description%><%escape_html Description%><%endif%></textarea>
</div>
</div>
Quote Reply
Re: [rascal] [NEW] Count/limit/display characters in text field In reply to
Where does the code go?

Code:
<div class="row clear">
<label for="Description" class="name">Description:</label>
<div class="value">
<textarea id="Description" name="Description"

style="font-size: 10px; width: 300px; height: 100px;"
maxLength="250"
onkeypress="return taLimit()"
onkeyup="return taCount(myDescription)"
onmouseout="return taCount(myDescription)"
onmouseover="return taCount(myDescription)"
>
<%if Description%><%escape_html Description%><%endif%></textarea>

You have <B>
<SPAN id=myDescription>
<%if Description%><%'250' - length_of ($Description)%>
<%else%>250<%endif%></SPAN></B>
characters remaining for your description...
</font>


</div>
</div>




To add other fields, just change the myDescription to something else, and use the same code with your other template tags.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
Pugdog,

I tested it and found that when I put my mouse in the textara box the count goes down to 247, it's set for 250, no characters typed.

Any Idea why this is happening?
Quote Reply
Re: [rascal] [NEW] Count/limit/display characters in text field In reply to
No... Not sure why it would do that. I checked my installs and that doesn't happen.

What happens when you start to type? What happens if you backspace, delete 3 characters? Do they go away? If you save text, does it display properly? (did you set the form up right?)


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
In Reply To:
No... Not sure why it would do that. I checked my installs and that doesn't happen.

What happens when you start to type? What happens if you backspace, delete 3 characters? Do they go away? If you save text, does it display properly? (did you set the form up right?)

What happens when you start to type? It starts counting down from 247.

What happens if you backspace, delete 3 characters? The count is correct from 247.

If you save text, does it display properly? Yes

(did you set the form up right?) Exactly like you have it in your post.
Quote Reply
Re: [rascal] [NEW] Count/limit/display characters in text field In reply to
Don't know.

Like I said, it's workng on all my demo sites with the correct counts.

I'd need to get into your system to see if I could figure out what is going on.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
Pugdog,

I just added this to my site and can't thank you enough. Even after just a few listings added, it was clear I was going to go insane without a counting script being added to my description field. Took me a moment to get it working, but I finally did.

It's working fine in MSIE, but it's not counting down for me at all in Firefox. Have you tested it in Firefox? Probably just needs a little tweak, at least I hope so, but I have no idea where to start. If you can figure it out, I would be very happy!

PS: I bought your large plugin package, though I haven't used too much of it - yet. Been focused on getting the main site up and now I can soon get to tweaking. Though I certainly DID use your great import tool. Smile
------
John Martel
New Age Web Marketing
My GL site
Quote Reply
Re: [newageweb] [NEW] Count/limit/display characters in text field In reply to
I just realized that the counter on the PayPal site (refund form) worked just fine for me in Firefox. I don't know if it addresses the other concerns you have, or if it would even work with GL, but if I grabbed it all, here it is. Maybe you can borrow some ideas. Coding just aint my thing.

Code:
<input type="text" size="3" maxlength="3" readonly name="remLen" value="255">
<span class="small">characters left</span>


<script language="JavaScript" type="text/javascript">
var maxStringLength = 255
if (document.focusform.note_to_buyer.value.length == 0)
document.focusform.remLen.value=maxStringLength;
else
document.focusform.remLen.value=maxStringLength
- document.focusform.note_to_buyer.value.length;
</script><input name="form_charset" type="hidden" value="UTF-8">

</form>

I'll PayPal you a few bucks if you can make this work for me man... just had someone else submit a whole bunch of text into my 135 ch/space field - well, tried to at least. I can only assume he was using Firefox since IE seems to work great! Thanks!
------
John Martel
New Age Web Marketing
My GL site
Quote Reply
Re: [newageweb] [NEW] Count/limit/display characters in text field In reply to
You know, I've just had some other issues with firefox as well.

I had some javascript working just fine with MSIE, but it broke completely with firefox.

I think it has to do with the defining of the fields, since what seems to break is the ability (or desire) of firefox to update the fields. For whatever reason, it seems firefox is not updating the values of the fields in the browser window the way MSIE does.

I'm not a javascript guru, but if anyone thinks they can fix this, I can give you another set of code that works well in MSIE, but not in FF that might help point to the reasons.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] [NEW] Count/limit/display characters in text field In reply to
has anyone been able to make this (or something similar) work with firefox?

it seems firefox doesn't allow the changes reflected in the object values to apply to the existing page objects. So, if you change an object value, it's not reflected in the actual object. (I'm not really into JS so I can't get more detailed). But, if anyone has found a fix on other sites, or one of the js archive sites, I'd like to know. This is a really useful thing, but if it only works in MSIE and not any other browsers.... <sigh>


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.