Limiting Characters per Line in a Textarea

Question

I have been searching all weekend for the solution to this quandry and have yet to find a solution that works correctly. What I am trying to acchieve is to limit the number of charatcers per line in a textarea - not limiting them identically, but a different number of characters per line of my choosing.

For Example:

1. I want to have only 4 lines in my textarea
2. Line 1,2 and 3 will be limited to 24 characters
3. Line 4 will have an unlimited number of characters

Is this possible with a textarea, or is there another way of doing i with a Div or something. I do realise that this has in all likelihood been covered before, but to find an actual working script that covers this criterium has proved extremely difficult and I don't have the kind of skill it takes to acchieve these results.

Thanks

Answer 1

Below is a sample snapshot of the problem that you're trying to solve:

• 4 lines in the textarea (Limit this on the textarea itself with rows="4")
• Lines 1, 2, and 3 are limited to 24 characters
• Line 4 will have an unlimited number of characters

Snapshot of the textarea:

123456789012345678901234
123456789012345678902333
232323232323232323323232
23232323232323232323236464536543654643

JavaScript:

$('#your-input').keypress(function() {
     var text = $(this).val();
     var arr = text.split("\n");

     if(arr.length > 5) {
         alert("You've exceeded the 4 line limit!");
         event.preventDefault(); // prevent characters from appearing
     } else {
         for(var i = 0; i < arr.length; i++) {
             if(arr[i].length > 24 && i < 3) {
                 alert("Length exceeded in line 1, 2, or 3!");
                 event.preventDefault(); // prevent characters from appearing
             }
         }
     }

     console.log(arr.length + " : " + JSON.stringify(arr));
});

This can be accomplished using a keypress event. When the keypress event fires, get the current value of the textbox and split the value into an array using the \n line break character as a delimiter.

• The length of the array tells you how many lines you have. If you've exceeded those lines, we fire an alert.
• The length of each individual string inside the array represents the length of each line. We use a for loop to check the first 3 lines. If we exceed the length of 24, we fire an alert.
• We ignore the last iteration of the loop, since we aren't concerned with the length of the last line.

This is not designed to be a complete solution, but this will definitely get you started and provide you with something that you can modify to suit your needs. Good luck!