Counting characters in a field July 24, 2007
Posted by Duncan in PeopleSoft, PeopleTools, PIA.trackback
I saw a query earlier today on the IT Toolbox messageboard where someone asked if there was a way to restrict a user to a certain number of letters or characters within a Long Edit box. The poster didn’t want to wait until the user tabs out of the field to tell them their text was too long.
I’d seen someone accessing the value of a field from JavaScript within an HTML Area before, and although I couldn’t find the post (I believe it was on SparkPath, but could be wrong) it set me thinking.
One solution (there may be better answers, but this was my submission) was as follows:
Place a Long Edit box on the page, this’ll be the field that contains the characters to counted. Add an HTML Area. This will contain a ‘counter’ field showing how many characters left, so position it just below the Long Edit box. Set the HTML Area value as constant and add the following code (remove my explanatory notes when you c+p):
<input readonly type="text" name="counter_field" size="3" maxlength="3" value="200">characters left
The snippet above places the counter field on the page. Note the name is set to ‘counter_field’ and the max is set to ‘200’. This is the starting value for the character count-down.
<SCRIPT LANGUAGE="JavaScript">
function CharCounter()
{
if (document.win0.DMD_CHAR_COUNT_DESCR200
.value.length > 200)
document.win0.DMD_CHAR_COUNT_DESCR200.value = document.win0.DMD_CHAR_COUNT_DESCR200
.value.substring(0, 200);
else
document.win0.counter_field.value = 200 - document.win0.DMD_CHAR_COUNT_DESCR200
.value.length;
}
The above function counts the number of characters in our Long Edit box (named DMD_COUNT_CHAR_DESCR200 in my page – view source in the PIA to see what yours is named, it’s usually <recname>_<fieldname>). If the length is greater than 200, it refills the field with the first 200 chars (effectively undoing any extra characters you add after the first 200). If the length is not more than 200 it updates the counter field with how many characters there are left.
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}
This function above allows us to add events to existing PeopleSoft fields. I can’t claim any credit for it as it was copied straight from the guys at GreySparling’s post on extending the usability of PeopleSoft. Thanks guys!
AddEvent(document.win0.
DMD_CHAR_COUNT_DESCR200, "keydown", CharCounter, false);
</script>
Finally, we add the Character Counter function call to our Long Edit box. This means whenever there’s a KeyPress and the focus is on our field, our function is fired.
Ok, that’s my effort … can anyone improve on this?
Comments
Sorry comments are closed for this entry
The PeopleSoft Tipster Blog 
OK, I have to admit I haven’t tried this out. But suppose the user already has 200 characters. If he or she types in the middle of the text, the end will be (silently) truncated – which could be quite surprising / annoying.
Ideally what you want is to prevent the 201st character from being added in the first place. I believe you can achieve this by returning a value (false) from the CharCounter function. Not sure if this works for pasting in text – there definitely needs to be validation on the server too (i.e. in Peoplecode) as a fallback.
Good point Tim. I might have a look at this over the next few days.
Great post. I used this code and have made a couple of mods to it for my own use.
1) I added a “keyup” event in addition to the “keydown” otherwise the counter wasn’t displaying correctly for me.
2) I also added some code to run the CharCounter function at startup — see http://xtrahot.chili-mango.net/2005/08/peoplesoft-page-javascript-insertion/ for more info. This counted whatever was already in the text box before the first key stroke.
I made a couple of other minor changes, but those made the most difference.
Mike Clarke
Hi,
I have tried this example without success. Perhaps if someone could explain where they are putting the Function calls that would help. Stating “we add the Character Counter function call to our Long Edit box” didn’t provide enough detail and I have tried creating HTMLAreas to put the code in both as constants and fields without success.
You need the HTML Area below the long edit box, and it shouldn’t matter whether you have it as a constant or hold the code in a field and point the HTML Area to that. I usually set it to a constant while I’m frequently changing the code.
Somehow i put the code ,but charcounter is not updating as i enter notes on the longedit box
Can some tell me step by step procedure to get to the functionality.
I tried creating HTML area and all I was able to get working is *****characters left******* . I am able to see HTML area on Page displaying the BOX and CHARACTERS LEFT.
I am not sure where to put the Function and how to link it up with Long Edit Box. Can some please Help on this.
My Requirement is something like this.
I have a page with Two Levels that is LEVEL 0 and LEVEL 1.
*********on LEVEL 0 I have ************
SUBPAGE DERIVED_WORK_BI,
SUBPAGE BI_PB_WRK,
SUBPAGE BI_HDR,
SECPAGE
*************Level 1 SCROLL AREA I have *********************
3 fields from BI_HDR_NOTE record ,
1 Field From NOTE_TYPE record,
1 field (Long Edit Box) from DERIVED_WORK_BI record,
1 Field from STD_NOTE_EF_VW
Limit of the LONG EDIT BOX field is 254 characters. On Page LONG EDIT BOX allows you to enter more than 254 Characters but when you save the page it will automatically truncate the data after 254 chars. Here I was planning to Place HTML area and display how many Characters are left while USER entering the data in the long edit box. I wanted to place the HTML AREA as field from DERIVED_WORK_BI
Example : If User entered 54 chars then in the HTML Area I have to show how many chars remaining to be entered.
Here I have to Link Up Long Edit Box with HTML Area. While I am keying in the data in Long Edit Box I have to Count the chars and display in HTML Area.
Can you please guide me thru this. How to Approach and What is code that I need to use and where?
I really Appreciate if you can Provide me the guidance.
For those struggling, there is an alternative method here:
http://it.toolbox.com/wiki/index.php/Character_Counter_for_Long_Text_Fields
and here:
http://peoplesoft.ittoolbox.com/groups/technical-functional/peopletools-l/re-character-counter-javascript-1291660
Thanks so much for this example. I put all of the above code on the HTML Area – Constant value and it worked like a charm. There was one typo in the above code that I had to fix in order to get it working. The “addEvent” function begins with a lower case – while the call begins with uppercase (“AddEvent”). If you make these two in synch it should work.