i need functionaliy which will have TextArea with

1) maximum total lines- 6 and 
2) in each line there must be maximum of 16 chars
3) if user enters 17th character the cursor should go to the next line 
and user will type in there (the line will be counted)
4) if user reaches to the 7th line it will not allow user to write
5) if user type e.g "Hello, I Love StackOverflow and its features" (counting 
from 1st Char 'H', the 16th char is 't' but it is whole word 'StackOverflow',
    it shouldn't break and continue to next line e.g.
        Hello, I Love St
        ackOverflow
now the whole word should e to next line like:

        Hello, I Love
        StackOverflow 
        and its features

here is the link what i have done so far /

sometimes some of the functionality work, some times not, and facing browser issues for onKeyUp and onKeyDown can anyone help me with it ?

i need functionaliy which will have TextArea with

1) maximum total lines- 6 and 
2) in each line there must be maximum of 16 chars
3) if user enters 17th character the cursor should go to the next line 
and user will type in there (the line will be counted)
4) if user reaches to the 7th line it will not allow user to write
5) if user type e.g "Hello, I Love StackOverflow and its features" (counting 
from 1st Char 'H', the 16th char is 't' but it is whole word 'StackOverflow',
    it shouldn't break and continue to next line e.g.
        Hello, I Love St
        ackOverflow
now the whole word should e to next line like:

        Hello, I Love
        StackOverflow 
        and its features

here is the link what i have done so far http://jsfiddle/nqjQ2/2/

sometimes some of the functionality work, some times not, and facing browser issues for onKeyUp and onKeyDown can anyone help me with it ?

• javascript
• jquery
• html
• textarea

Share Follow asked Jan 10, 2013 at 13:56 Sunil LoharSunil Lohar 2,24244 gold badges3131 silver badges4646 bronze badges 7

• Always post the relevant code/markup/etc. in the question itself, don't just link to jsfiddle. (A fiddle is also nice.) – T.J. Crowder Commented Jan 10, 2013 at 13:58
• 2 Strongly remend doing what SO does instead: Allow people to type freely, show them whether they're over-limit, and don't allow them to post when they're over-limit. But don't try to prevent them from going over-limit. It's a much better user experience. (Type a lot in a ment box here on SO to see what I mean.) – T.J. Crowder Commented Jan 10, 2013 at 13:58
• Speaking from experience, writing this kind of logic on top of a text area is a very large and very plicated undertaking. You should first step back and ask yourself (or your client) if it is really worth it to you/them. – jbabey Commented Jan 10, 2013 at 13:58
• The biggest problem you will face is font's... Not all fonts are monospaced (i.e. same width regardless of which character is used) meaning you can't reliably count how many characters are on each line. In addition to this, you have to take into consideration the browsers own wrapping functionality. Do you plan on using a monospaced font? – Gavin Commented Jan 10, 2013 at 14:03
• @gavin, i can count chars in each line and i am using font-family - arial – Sunil Lohar Commented Jan 10, 2013 at 14:07

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 12

I think this is mostly what you want:

<textarea id="splitLines"></textarea>

JavaScript:

var textarea = document.getElementById("splitLines");
textarea.onkeyup = function() {
    var lines = textarea.value.split("\n");
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length <= 16) continue;
        var j = 0; space = 16;
        while (j++ <= 16) {
            if (lines[i].charAt(j) === " ") space = j;
        }
        lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
        lines[i] = lines[i].substring(0, space);
    }
    textarea.value = lines.slice(0, 6).join("\n");
};

See the fiddle in action.

In Jquery

$(function () {

    var limit = function (event) {
        var linha = $(this).attr("limit").split(",")[0];
        var coluna = $(this).attr("limit").split(",")[1];

        var array = $(this)
            .val()
            .split("\n");

        $.each(array, function (i, value) {
            array[i] = value.slice(0, linha);
        });

        if (array.length >= coluna) {
            array = array.slice(0, coluna);
        }

        $(this).val(array.join("\n"))

    }

    $("textarea[limit]")
        .keydown(limit)
        .keyup(limit);

})



<textarea limit='10,5'  cols=10 rows=5 ></textarea>

http://jsfiddle/PVv6c/