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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Limit lines and charachters in a textarea

    Hi - I have the following requirement for a textarea:

    Limit the number of lines to 8
    Limit the number of characters to 20 per line
    Force a line beak when the user reaches he end of a line but break the line at the start of the last word (not half way through the word).
    Allow pasting into the field and auto-format the line/character count
    Keep he cursor where it should be (don't move it to the end of the field after any formatting)

    This is more complicated than it sounds - anyone worked on something similar?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    All reasonably doable except "keep the cursor where it should be".

    DO NOT USE CODE BELOW...

    For some cases it gets into infinite loop & crashes browser. I'll see if I can fix it. In meantime, don't use it.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function pretty()
    {
        var form = document.forms[0];
        var ta = form.myTextArea;
        var lines = ta.value.split("\n");
        for ( var i = 0; i < lines.length; ++i )
        {
            var line = lines[i];
            if ( line.length > 20 )
            {
                var l20 = line.substr(0,20);
                if ( line.charAt(20) == " " )
                {
                    lines[i] = l20;
                    line = line.substr(21);
                } else {
                    var sp = l20.lastIndexOf(" ");
                    lines[i] = l20.substr(0,sp);
                    line = line.substr(sp+1);
                }
                var nextline = lines[i+1];
                if ( nextline == null )
                {
                    nextline = "";
                } else {
                    nextline = " " + nextline;
                }
                lines[i+1] = line + nextline;
            }
        }
        while ( lines.length > 8 ) lines.splice(8,lines.length-8);
        var newvalue = lines.join("\n");
        if ( ta.value != newvalue ) ta.value = newvalue;
    }
    setInterval( pretty, 250 );
    </script>
    <body>
    <form>
    <textarea name="myTextArea" rows="8" cols="20"></textarea>
    </form>
    </body>
    </html>
    Not quite sure how I'd go about keeping cursor in right place.
    Last edited by Old Pedant; 12-14-2011 at 01:14 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Only possibly infinite loop I see in there is this one:
    Code:
        while ( lines.length > 8 ) lines.splice(8,lines.length-8);
    So presumably we could rewrite that to avoid possibility of infinite loop.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, I *THINK* this version fixes the bug. Use it at your own risk.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function pretty()
    {
        var form = document.forms[0];
        var ta = form.myTextArea;
        var lines = ta.value.split("\n");
        for ( var i = 0; i < lines.length && i < 9; ++i )
        {
            var line = lines[i];
            if ( line.length > 20 )
            {
                var l20 = line.substr(0,20);
                if ( line.charAt(20) == " " )
                {
                    lines[i] = l20;
                    line = line.substr(21);
                } else {
                    var sp = l20.lastIndexOf(" ");
                    lines[i] = l20.substr(0,sp);
                    line = line.substr(sp+1);
                }
                var nextline = lines[i+1];
                if ( nextline == null )
                {
                    nextline = "";
                } else {
                    nextline = " " + nextline;
                }
                lines[i+1] = line + nextline;
            }
        }
        newvalue = lines[0];
        for ( var n = 1; n < lines.length && n < 8; ++n ) 
        {
            newvalue += "\n" + lines[n];
        }
        if ( ta.value != newvalue ) ta.value = newvalue;
    }
    setInterval( pretty, 250 );
    </script>
    </head>
    <body>
    <form>
    <textarea name="myTextArea" rows="8" cols="20"></textarea>
    </form>
    </body>
    </html>
    The culprit was that any string of more than 20 characters without a space could cause infinite loop. I limited the loops now in two places to never go beyond the 8 lines.

    But this still doesn't fix the "leave the cursor where it is" problem.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    var l20 = line.substr(0,20);

    I was about to point out that a javascript variable name may not start with a number, and the realised that you are using a lower case L.
    120 and l20 look very similar, especially in code tags
    Code:
    120 and l20
    For myself I always avoid using l and o which can easily be confused with digits.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    It's just because I was too lazy (for this simple demo) to write "first20characters" or something more descriptive. SO "l20" was short for "left20".

    But you make a good point. Even in demos like this I should make the variable names clear.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks - this isn't bad - kind of where we are up to. Still a bit buggy when you put the cursor in the middle of text and add new lines and also a few other bugs but it's a good effort.


  •  

    Posting Permissions

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