Forum Moderators: open
I want to limit my textarea to 2000 chars. I did find some useful ways of doing this, but nothing seems to work as I want.
This is want I want:
• If the user presses the 2001st char, an alertbox will apear saying "max 2000 chars" and the last char should be deleted.
• The same should happen when the users pastes a larger text from the clipboard, so I guess a onkey event is not enough.
• needless to say, the user must be able to press delete and return, and also be able to tab between form fields.
Any ideas?
thanx.
This script can do partially what you require it checks amount pasted into textarea using onkeyup and keeps a running check on the text being typed in with onkeypress.
Not sure on what and how you would go about removing the excess chars entered though, might do it with a little more work and some calculations.
<script language="javascript">
function checkInput(obj,max){
var result = true;
if (obj.value.length >= max){
alert("Too much chars entered.");
result = false;
}
if (window.event)
window.event.returnValue = result;
return result;
}
</script>
<textarea rows="20" cols="50" onkeyup="checkInput(this,2000)" onkeypress="checkInput(this,32)"></textarea>
-George
function checkInput(obj,max,text){
var result = true;
if (obj.value.length >= max){
alert('Too much data in the text box!);
rem = document.getElementById('data').value.length - max
var stripped=text.substring(0, rem);
alert(stripped);
document.getElementById('data').value = stripped;
result = false;
}
if (window.event)
window.event.returnValue = result;
return result;
}
Might need some tidying up though ;-)
-George
Another thing, would this allow me to use chars like backspace and return without problems?
thanx
<script language="javascript">
function checkInput(obj,max){
var result = true;
if (obj.value.length >= max){
var stripped = obj.value.substring(0, max);
document.getElementById('data').value = stripped;
result = false;
}
if (window.event)
window.event.returnValue = result;
return result;
}
</script>
>>I see you refer to the id "data" and you have predefined values called text and obj in your function. Whats the difference between theese?
text and obj now comes under the one 'obj' it was left in for debug reasons - i have now removed text and used the obj.value to get the same value as text provided.
<textarea rows="20" cols="50" onkeyup="checkInput(this,2000)" onkeypress="checkInput(this,32)"></textarea>
-George
Anyways, the script works fine, except that it still allows the user to paste how many chars he/she likes into the textarea. It only triggers the limitCheck when a key is pressed.
Is there a special reason for the if (window.event) window.event.returnValue = result;?
thank you for your effort.
>>Is there a special reason for the if (window.event) window.event.returnValue = result;?
Its keep ing track of each keypress during user freely putting text into the textarea either true or false.
-George
Thanks,
-George
>>Just don't forget to have something in place on the server to strip out additional characters
Sorry I dont fully understand this! Can you explain further?
-George
But, would that not be already stripped in the parameter being passed, as its new value has been stripped to 2000 chars, before the form submittal? I have not went as far as test it being past through the form, I only tested it to the point of what is being displayed to the client!
-George
The script you posted does work in firefox & mozilla for mac (my working machine). In IE/5 the textarea displays some very weird characters (actually only squares) and in safari 125, a paste doesnt trigger the onkey event and the user cannot use the backspace, return or tab key. I have not tested on a PC.
I needed a counter as well, so this is my code that I use now. It seems to work well in most browsers:
javascript:
function limit(what,chars,counter) {
if (what.value.length > chars) {
what.value=what.value.substr(0,chars);
alert('max +chars+' chars!');
}
counting = (chars - what.value.length);
c = document.getElementById(counter);
c.innerHTML = counting;
}
html:
<p><label for="text"><strong>Text</strong></label> ¦ Chars left: <span id="count1">500</span></p>
<textarea name="text" rows="10" cols="50" onkeyup="limit(this,500,'count1');" onkeydown="limit(this,500,'count1');" onblur="limit(this,500,'count1');" onfocus="limit(this,500,'count1');"></textarea>
As you can see, I added a a onblur and onfocus event to somewhat compensate for safari users.
I also have a server side script that counts and gives an error if the user inputs too many chars.
Thanx all for your help
...hope this helps.
Is there a better alternative that the W3 DOM specifications supports?
thanx
But, would that not be already stripped in the parameter being passed, as its new value has been stripped to 2000 chars, before the form submittal? I have not went as far as test it being past through the form, I only tested it to the point of what is being displayed to the client!
Server-side validation should ALWAYS be done. Client-side validation (your javascript) is merely a user convenience.
If you have specific criteria for the data you will store or process on the server, you should validate it on the server. Some people disable javascript. And some kids have been known to just see what happens when they spoof a web form (i.e. bypass your client-side validation).
My mistake: you are correct ... it turns out innerHtml is in fact well supported by all the major browsers.
Sorry for the misleading info.
Regards
