Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Limiting number of rows in <textarea>

    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!

  • #2
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #5
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mboxcar
    I need to limit my textarea to six rows
    Code:
    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>
    Last edited by gph; 10-28-2005 at 02:38 AM.

  • #7
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll write the function including characters per row in a couple hours

  • #8
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mboxcar
    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

  • #9
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok

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

  • #10
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, please! Thanks for the help. I'm ready to resort to six input boxes with maxlength of 40

  • #11
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

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

  • #12
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, it's working great so far! I will continue with testing as per your suggestion. Many many thanks!

  • #13
    gph
    gph is offline
    Regular Coder
    Join Date
    Apr 2005
    Posts
    161
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is cleaned up a bit and works with multiple textareas
    Code:
    <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>

  • #14
    New to the CF scene
    Join Date
    Oct 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Wow, even better! It works great. Thank you so much!

  • #15
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •