...

View Full Version : Limiting number of rows in <textarea>



mboxcar
10-27-2005, 11:37 PM
Hi, I've found some scripts to limit the number of characters in a textarea field, but I'm unable to find anything to limit the number of rows and columns.

I need to limit my textarea to six rows, no more than 40 characters per row. I'm creating a user-inputed gift message that will get transferred to our SQL server, and these are the parameters I've been given. Can anyone help?

Thanks!

mboxcar
10-27-2005, 11:45 PM
BTW, here's what I have down in my HTML:
<font face="Arial, Helvetica, sans-serif" size="2">
<b>If this order is a gift, enter your gift message here:</b></font><br>
<textarea rows="6" cols="40" value="<%=gift%>" name="gift"></textarea>

mboxcar
10-28-2005, 12:39 AM
I found this in an online search--making me think I should just give up?


Whilst it is relatively easy to limiting content to a certain length,
limiting to a certain # of rows is non-trivial due to user agents wrapping lines to prevent words being cut in two.

Could someone please let me know if this is worth pursuing. Thanks!

boxxer03
10-28-2005, 12:56 AM
if you know how to limit the characters then to limit it to rows and columns is easy. Just multiply your rows by the number of columns and that's the maximum number of characters you can allow. so if your max is 6 rows, 40 columns then your max number of characters is 240.

mboxcar
10-28-2005, 01:13 AM
It doesn't work, because the # of rows is fixed in our database, so a character max of 240 allows the user to create 240 single-character rows. Does that make sense? I really need a column max of 40, row max of 6 for it to mesh with our database.

gph
10-28-2005, 02:31 AM
I need to limit my textarea to six rows



function foo(textarea,limit){
var val=textarea.value.replace(/\r/g,'').split('\n');
if(val.length>limit){
alert('You can not enter\nmore than '+limit+' lines');
textarea.value=val.slice(0,-1).join('\n')
}
}

<textarea onkeyup="foo(this,6)">some text</textarea>

gph
10-28-2005, 02:46 AM
I'll write the function including characters per row in a couple hours

gph
10-28-2005, 02:57 AM
I found this in an online search--making me think I should just give up?


Whilst it is relatively easy to limiting content to a certain length,
limiting to a certain # of rows is non-trivial due to user agents wrapping lines to prevent words being cut in two.

Could someone please let me know if this is worth pursuing. Thanks!
Ah, I missed that, I'll give it a try

gph
10-28-2005, 03:26 AM
Ok



<textarea wrap="off"


solves auto-wrap in IE and FF but is non-standard. If you don't mind using it let me know and I'll continue

mboxcar
10-28-2005, 06:16 AM
yes, please! Thanks for the help. I'm ready to resort to six input boxes with maxlength of 40 :o

gph
10-28-2005, 07:43 AM
I went ahead and started anyway, it interests me :)

This is just bashed together to get it working. There is likely bugs or obvious ways to get around it. Speaking of getting around it, you'll need something on the server as a backup for js disabled browsers.

What I need you to do is take your time and test it in every way you can think of. Look for ways to screw it up. I think the cursor location, after an alert, might need to be changed.

You can use it for max lines and/or max characters. Presently it's set to 6 lines and 40 characters per line. Setting either value in the function call to 0 will cause it to not check for that restriction. Also, I added a vbs alert for IE, it's not needed but I think it's more user friendly than the standard js alert.


<html>
<head>
<title>Limit Textarea</title>
<script type="text/javascript">

var alert_title='Input Restriction';

function limitTextarea(textarea,maxLines,maxChar){
var lines=textarea.value.replace(/\r/g,'').split('\n'),
lines_removed,
char_removed,
i;
if(maxLines&&lines.length>maxLines){
alert('You can not enter\nmore than '+maxLines+' lines');
lines=lines.slice(0,maxLines);
lines_removed=1
}
if(maxChar){
i=lines.length;
while(i-->0)if(lines[i].length>maxChar){
lines[i]=lines[i].slice(0,maxChar);
char_removed=1
}
if(char_removed)alert('You can not enter more\nthan '+maxChar+' characters per line')
}
if(char_removed||lines_removed)textarea.value=lines.join('\n')
}

function watchTextarea(){
document.getElementById('resticted').onkeyup()
}

function set_ie_alert(){
window.alert=function(msg_str){
vb_alert(msg_str)
}
}
</script>
<script language="vbscript" type="text/vbs">

set_ie_alert()

Function vb_alert(msg_str)
MsgBox msg_str,vbOKOnly + vbInformation + vbApplicationModal,alert_title
End Function

</script>
</head>
<body>
<textarea onkeyup="limitTextarea(this,6,40)" style="width:400px;height:200px" wrap="off" id="resticted" onfocus="focus_watch=setInterval('watchTextarea()',250)" onblur="clearInterval(focus_watch)">some text</textarea>
</body>
</html>

mboxcar
10-28-2005, 10:25 PM
Wow, it's working great so far! I will continue with testing as per your suggestion. Many many thanks!

gph
10-31-2005, 03:05 AM
This is cleaned up a bit and works with multiple textareas


<html>
<head>
<title>Limit Textarea</title>
<style type="text/css">

textarea{
width:400px;
height:200px
}

</style>
<script type="text/javascript">

var alert_title='Input Restriction';

function limitTextarea(el,maxLines,maxChar){
if(!el.x){
el.x=uniqueInt();
el.onblur=function(){clearInterval(window['int'+el.x])}
}
window['int'+el.x]=setInterval(function(){
var lines=el.value.replace(/\r/g,'').split('\n'),
i=lines.length,
lines_removed,
char_removed;
if(maxLines&&i>maxLines){
alert('You can not enter\nmore than '+maxLines+' lines');
lines=lines.slice(0,maxLines);
lines_removed=1
}
if(maxChar){
i=lines.length;
while(i-->0)if(lines[i].length>maxChar){
lines[i]=lines[i].slice(0,maxChar);
char_removed=1
}
if(char_removed)alert('You can not enter more\nthan '+maxChar+' characters per line')
}
if(char_removed||lines_removed)el.value=lines.join('\n')
},50);
}

function uniqueInt(){
var num,maxNum=100000;
if(!uniqueInt.a||maxNum<=uniqueInt.a.length)uniqueInt.a=[];
do num=Math.ceil(Math.random()*maxNum);
while(uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length]=num;
return num
}

Array.prototype.hasMember=function(testItem){
var i=this.length;
while(i-->0)if(testItem==this[i])return 1;
return 0
};

function set_ie_alert(){
window.alert=function(msg_str){
vb_alert(msg_str)
}
}

</script>
<script language="vbscript" type="text/vbs">

set_ie_alert()

Function vb_alert(msg_str)
MsgBox msg_str,vbOKOnly+vbInformation+vbApplicationModal,alert_title
End Function

</script>
</head>
<body>
<textarea onfocus="limitTextarea(this,6,40)" wrap="off">some text</textarea>
<textarea onfocus="limitTextarea(this,2,10)" wrap="off">some text</textarea>
</body>
</html>

mboxcar
10-31-2005, 11:10 PM
Wow, even better! It works great. Thank you so much!

nvidura
10-22-2008, 05:41 PM
I've encountered the same problem little while ago. This would be the best solution. http://www.jsnippet.com/?p=103 hope you too will find this useful.

Cheers.
Nirmal



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum