Textarea code

[Garry Jones]

I have been using this code for sometime. I can use it to show the user how
many remaining characters are reamaining in a text area. Now I need to
develop the code and dont know where to start.

These are the three parts of the working code

1) Javascript

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;
}

2) Live output to user
You have max 255 chars. You have <span id=myCounter>255</span> remaining
chars

3) Textarea code
<textarea cols=40 rows=7 wrap=virtual onkeypress="return taLimit()"
onkeyup="return taCount(myCounter)" maxLength="255"></textarea>

The problem is that now I need to show the user some existing text
(contained in a variable) in the textarea which he/she can edit or add to.
The initial number is the number of remaining characters shown by my code is
a static 255. If 120 characters are left and one is added it changes from
255 remaining to 119. (119 is correct).

When the textarea is initially displays I would like it to subtract the
number of characters contained in the variable from "maxlength" and display
the true ammount of remaining characters.

Can anyone point me in the right direction?

Garry Jones
Sweden

 

[RobG]

I have been using this code for sometime. I can use it to show the user how
many remaining characters are reamaining in a text area. Now I need to
develop the code and dont know where to start.

Here's some (untested) fixes - your code seems very IE-specific. In
general, pass a reference to the textarea from the event handler using
"this". Replace direct calls to the (invalid) maxlength attribute to
ones that use getAttribute('maxLength');

These are the three parts of the working code

1) Javascript

function taLimit() {
var taObj=event.srcElement;

Pass a reference to the element to the function using 'this', then
ditch the (IE proprietary) event.srcElement line:

function taLimit( taObj ) {

if (taObj.value.length==taObj.maxLength*1) return false;

or:

return !(taObj.value.length == taObj.getAttribute('maxlength'));

}
function taCount(visCnt) {
var taObj=event.srcElement;

Again, pass a reference to the element using "this", and get maxLength
only once:

function taCount(taObj, visCnt) {
var maxLength = taObj.getAttribute('maxLength');

if (taObj.value.length>taObj.maxLength*1)

if (taObj.value.length > maxLength)

taObj.value=taObj.value.substring(0,taObj.maxLength*1);

There is no need for the *1 bit:

taObj.value=taObj.value.substring(0, maxLength);

and so on...

if (visCnt) visCnt.innerText=taObj.maxLength-taObj.value.length;

Replace innerText with innerHTML, use document.getElementById(visCnt)
rather than a direct call using the ID as a global variable.

}

2) Live output to user
You have max 255 chars. You have <span id=myCounter>255</span> remaining
chars

3) Textarea code
<textarea cols=40 rows=7 wrap=virtual onkeypress="return taLimit()"

<textarea cols=40 rows=7 wrap=virtual onkeypress="return
taLimit(this)"

Also, cols is a mandatory attribute.

onkeyup="return taCount(myCounter)" maxLength="255"></textarea>

onkeyup="return taCount(this, 'myCounter')"

The problem is that now I need to show the user some existing text
(contained in a variable) in the textarea which he/she can edit or add to.
The initial number is the number of remaining characters shown by my code is
a static 255. If 120 characters are left and one is added it changes from
255 remaining to 119. (119 is correct).

Then call the appropriate functions onload.

You might want to investigate a function that runs onload, checks all
the textarea elements and for those that have a maxlength attribute,
add the appropriate onkey functions and then call them so that the
"characters left" message is accurate.

Incidentally, maxlength is not a valid attribute for textarea elements,
rows and cols attributes are mandatory. HTML validators will complain
- but that may not bother you.