Limit textarea length

[Jesper Rønn-Jensen]

I have a textarea that must be limited to 70 characters. No big deal --
at least so I thought.
* Textarea must not exceed 70 characters
* Exceeding content must be cut off
* Must work on input by keyboard (keypress, keyup events)
* Must work on pasted input from context menu
* Must work on pasted input via CTRL+V and similar
* Must work on pasted input via browsers menu>Edit>Paste
* Must work in Mozilla + IE and coded via W3C standards

I found quite some discussions here in comp.lang.javascript on this
subject, but all lack the discussion of non-keyboard inputs.

So far, I concluded to avoid using the onkeyup or onkeypress events -
they do not capture when data pasted via the mouse.

This is what I do now, but there are still problems.
* Textarea onfocus() adds a window.setInterval eventlistener to check
the textarea value 10 times per second.
* If textarea.value exceeds 70 characters, set textarea.value to
substring(0,69)
* Textarea onblur() removes eventlistener via window.clearInterval

This works when I paste text in all ways and when I enter data by
keyboard from one end to the other. BUT as soon as I add text at the
beginning of the textarea, then the end text is cut off and cursor is
moved to the end of textarea.

My idea would work OK if I could figure out a way to move cursor back
to its position when I finish cropping textarea text. As you might see,
I'm a bit stuck here.
Any suggestions appreciated,

Thanks in advance,

Jesper

 

[McKirahan]

I have a textarea that must be limited to 70 characters. No big deal --
at least so I thought.

[snip]

Why not just use a "text" field?

<input type="text" name="data" size="70" maxlength="70">

You can also set "size=" to somerthing else if it doesn't fit on your page.

 

[Jesper Rønn-Jensen]

Thanks for your quick reply.

Why not just use a "text" field?

Text field is a no-go because I cannot input line breaks. Sorry, that
would have been easy. I must use a textarea.

 

[RobG]

Thanks for your quick reply.



Text field is a no-go because I cannot input line breaks. Sorry, that
would have been easy. I must use a textarea.

Most people would not include line breaks in their character
count (if they actually try to count the characters at all).

Why not have your event listener write the current number of
characters to a place in the page next to the text area. When
it exceeds 70 characters, make it red and bold. If the user
submits the form with too many characters, give them an error
message and send them back to fix it.

Attempting to automate character removal will likely just bind
you in ever more complex "what if..." scenarios. And randomly
removing characters from the end of the supplied text to make it
only 70 characters will likely frustrate users - what if the bit
you programmatically trimmed was something they wanted kept, and
some other part trimmed?

The only way they'll know they've hit the magic number is if
they notice characters disappearing from the end of the text.

It's like when you type an incorrect URL into the browser
address bar. Having advised you of the error, the browser
should leave the incorrect text there and let you fix it,
rather than display the URL of the error page (as some browsers
still do).

Users aren't dumb. Give them appropriate information and a
helpful (not interventionist) interface and they'll respond much
better.

 

[Stephen Chalmers]

I have a textarea that must be limited to 70 characters. No big deal --
at least so I thought.
* Textarea must not exceed 70 characters
* Exceeding content must be cut off
* Must work on input by keyboard (keypress, keyup events)
* Must work on pasted input from context menu
* Must work on pasted input via CTRL+V and similar
* Must work on pasted input via browsers menu>Edit>Paste
* Must work in Mozilla + IE and coded via W3C standards

I found quite some discussions here in comp.lang.javascript on this
subject, but all lack the discussion of non-keyboard inputs.

So far, I concluded to avoid using the onkeyup or onkeypress events -
they do not capture when data pasted via the mouse.

This is what I do now, but there are still problems.
* Textarea onfocus() adds a window.setInterval eventlistener to check
the textarea value 10 times per second.
* If textarea.value exceeds 70 characters, set textarea.value to
substring(0,69)
* Textarea onblur() removes eventlistener via window.clearInterval

This works when I paste text in all ways and when I enter data by
keyboard from one end to the other. BUT as soon as I add text at the
beginning of the textarea, then the end text is cut off and cursor is
moved to the end of textarea.

My idea would work OK if I could figure out a way to move cursor back
to its position when I finish cropping textarea text. As you might see,
I'm a bit stuck here.
Any suggestions appreciated,

Thanks in advance,

Jesper

Keyboard events are no problem, but I know of no event-driven way of
limiting pasted text other than with onchange, which doesn't fire until the
textarea loses focus. Of course you can use setInterval() to monitor the
length of the text periodically and limit it if necessary. Aside from
user-friendliness issues already mentioned, you could see if this meets your
needs:

<html>
<body>
<BR>My dear Watson," said he, "I cannot agree with those who rank modesty
among the virtues. To the logician all things must be seen exactly as they
are, and to underestimate oneself is as much a departure from truth as to
exaggerate one's own powers."
<BR><BR><B>Paste text above into text area below.</B><BR><BR>
<script>
function chopText(elem, limit)
{
if(elem.value.length>limit)
elem.value=elem.value.substring(0,limit);

document.f1.cLeft.value=limit-elem.value.length
}

setInterval("chopText(document.f1.ta1,70)",1000);

</script>

<form name="f1">

</TEXTAREA>

<BR>Characters Remaining
<input size=3 type="text" name="cLeft">
</form>
</body>
</html>

 

[RobG]

Stephen Chalmers wrote:
[...]

Keyboard events are no problem, but I know of no event-driven way of
limiting pasted text other than with onchange, which doesn't fire until the
textarea loses focus. Of course you can use setInterval() to monitor the
length of the text periodically and limit it if necessary. Aside from
user-friendliness issues already mentioned, you could see if this meets your
needs:

A good start, so here's an similar version that implements a
less interventionist approach (i.e. it warns, not does). I
shortened the interval too - 1 second was a tad long for me.


<html><head><title>Character play</title></head>
<body>
<BR>"If you are going through hell, the best thing to do
is to keep going" - Winston Churchill
<BR><BR><B>Paste text above into text area below.</B><BR><BR>
<script type="text/javascript">
function checkText(elem, limit) {
var charRemaining = limit - elem.value.length;

if (document.getElementById) {
var aText = document.getElementById('alertText');
var aNumber = document.getElementById('alertNumber');
} else if (document.all) {
var aText = document.all['alertText'];
var aNumber = document.all['alertNumber'];
}

if (aText && aNumber) {
if (charRemaining < 0) {
aText.innerHTML = '<b>Too many characters, remove:&nbsp;';
aNumber.innerHTML = '<b>' + Math.abs(charRemaining)
+ '</b>';
} else {
aText.innerHTML = 'Characters remaining:&nbsp;'
aNumber.innerHTML = charRemaining;
}
}
}

setInterval("checkText(document.f1.ta1,70)",500);

</script>

<form name="f1" action="">
<BR>
<textarea name='ta1' rows="5" cols="40"
onchange=onkeyup="checkText(this,70)"

</TEXTAREA>

<BR><span id="alertText">Characters Remaining:</span>
<span id="alertNumber" style="
border: 1px solid red;
padding: 4 4 4 4;">70</span>
</form>
</body>
</html>