Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Limit textarea length

Reply
Thread Tools

Limit textarea length

 
 
Jesper Rønn-Jensen
Guest
Posts: n/a
 
      01-26-2005
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

 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      01-26-2005
"Jesper Rønn-Jensen" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> 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.




 
Reply With Quote
 
 
 
 
Jesper Rønn-Jensen
Guest
Posts: n/a
 
      01-26-2005
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.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-27-2005
Jesper Rønn-Jensen wrote:
> 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.
>


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.

--
Rob
 
Reply With Quote
 
Stephen Chalmers
Guest
Posts: n/a
 
      01-27-2005
Jesper Rønn-Jensen <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> 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">
<BR>
<textarea name='ta1' rows=5 cols=40 onchange=onkeyup="chopText(this,70)"
></TEXTAREA>

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

--
S.C.
http://makeashorterlink.com/?H3E82245A



 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-27-2005
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>


--
Rob
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Limit <textarea> length without losing caret position Álvaro G. Vicario Javascript 7 05-20-2008 01:21 PM
How to add </textarea> within <textarea> tags? frank.moens@gmail.com Javascript 1 07-04-2007 04:00 PM
Textarea Inside of a textarea wperry1@gmail.com ASP General 6 02-05-2006 08:00 AM
Limit input length in textarea wing Javascript 3 11-05-2003 10:15 AM
Removing carriage returns from <textarea></textarea> input Augustus ASP General 1 09-10-2003 04:55 AM



Advertisments