homepage Welcome to WebmasterWorld Guest from 54.224.202.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Limit textarea
is it possible in a descent way?
Bonusbana




msg:1489866
 12:46 pm on May 26, 2004 (gmt 0)

Hi

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.

 

Alternative Future




msg:1489867
 2:31 pm on May 26, 2004 (gmt 0)

Hi Bonusbana,

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

Alternative Future




msg:1489868
 2:46 pm on May 26, 2004 (gmt 0)

I think this one does it:

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

Bonusbana




msg:1489869
 3:06 pm on May 26, 2004 (gmt 0)

I think you might be on to something. How would you write the html to this one? 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?

Another thing, would this allow me to use chars like backspace and return without problems?

thanx

Alternative Future




msg:1489870
 3:10 pm on May 26, 2004 (gmt 0)

Ok this one works now :)

<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

Bonusbana




msg:1489871
 3:26 pm on May 26, 2004 (gmt 0)

I still dont understand the
getElementById('data').value = stripped;. In your html example, there is no element with the id "data". Isnt it better to replace it with obj.value = stripped;?

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.

Alternative Future




msg:1489872
 3:45 pm on May 26, 2004 (gmt 0)

>>I still dont understand the getElementById('data').value = stripped;. In your html example, there is no element with the id "data". Isnt it better to replace it with obj.value = stripped;?
The textarea has an id of data, and that particular piece of code appends the text that was input. You can use obj.value = stripped; and remove the id from the textarea just with my coding I tend to use ID's
added: sorry I never posted the updated textarea when I assigned the id :(

>>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.
What browser are you using I did my testing on IE and pasting text into the textarea was triggered by the onkeyup="checkInput(this,32)" event. Which removed all the extra text not allowed!

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

Alternative Future




msg:1489873
 4:30 pm on May 26, 2004 (gmt 0)

I have just tested it in NS and FireBird no problems with the cut and paste!
Any chance you can tell me which browser its not working in for you?

Thanks,

-George

DrDoc




msg:1489874
 4:47 pm on May 26, 2004 (gmt 0)

Just don't forget to have something in place on the server to strip out additional characters ;)

Alternative Future




msg:1489875
 9:42 pm on May 26, 2004 (gmt 0)

Hi DrDoc,

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

DrDoc




msg:1489876
 10:02 pm on May 26, 2004 (gmt 0)

The script the form is submitted to... It needs to remove any characters above 2000...

Alternative Future




msg:1489877
 8:38 am on May 27, 2004 (gmt 0)

Ah ic,

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

Bonusbana




msg:1489878
 10:28 am on May 27, 2004 (gmt 0)

Thank you both for your inputs.

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

frogg




msg:1489879
 4:41 pm on May 28, 2004 (gmt 0)

innerHtml isn't part of the W3C standard DOM -- if I recall correctly it is only supported in Microsoft's IE.

...hope this helps.

Bonusbana




msg:1489880
 4:47 pm on May 28, 2004 (gmt 0)

innerHTML seems to work in my mozilla, firefox, safari and IE5 for mac. I dont know anything about pc.

Is there a better alternative that the W3 DOM specifications supports?

thanx

john_k




msg:1489881
 4:52 pm on May 28, 2004 (gmt 0)

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).

frogg




msg:1489882
 12:27 am on May 29, 2004 (gmt 0)

Bonusbana,

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved