Limiting number of lines and letters in single line in textarea

Question

Problem:
I am trying to limit number of lines AND letters in each line in a textbox.

What i got so far:
So far i managed to limit lines count using this:

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

if(e.keyCode == 13 && lines.length >= $(this).attr('rows')) { 
        return false;
    }

This won't allow user to push return key (keyCode 13) if the limit of lines is reached.

The problem:
Now i am trying to limit number of letters in a single line too, because if i reach end of my textarea (with return key) i still can hold a letter/write tons of text, and it will jump to another line when it reaches end of line. That way this limitation can be "cheated" and i am looking for a solution for that.

My ideas, not solving the problem:

else{
    for(var i = 0; i < lines.length && e.keyCode != 13; i++) {
         if(lines[i].length >= $(this).attr('cols')) {
             return false; // prevent characters from appearing
         }
     }
}

I tried this to limit number of letters. That works, but it got flaws. If i reach max letters in one line ( ANY ), i CANT TYPE IN ANY LINE anymore.

I have no idea how to check only line i am typing in RIGHT NOW.

Answer 1

Tested in chrome : http://jsfiddle.net/3e3EH/1/

$(document).ready(function(){
    var textArea = $('#foo');
    var maxRows = textArea.attr('rows');
    var maxChars = textArea.attr('cols');
    textArea.keypress(function(e){
        var text = textArea.val();
        var lines = text.split('\n');
        if (e.keyCode == 13){
            return lines.length < maxRows;
        }
        else{
            var caret = textArea.get(0).selectionStart;
            console.log(caret);

            var line = 0;
            var charCount = 0;
            $.each(lines, function(i,e){
                charCount += e.length;
                if (caret <= charCount){
                    line = i;
                    return false;
                }
                //\n count for 1 char;
                charCount += 1;
            });

            var theLine = lines[line];
            return theLine.length < maxChars;
        }
    });

});​

Edit

As jbabey pointed out, ctrl+v or right-click -> paste can be an issue. right click can easily be prevented. for ctrl+v, you probable can detect it too... Just disabling javascript will obviously break the thing, too. Anyways, as any client-side validation, you have to double check on server-side.

Answer 2

Here's what I came up with. Fairly clean and seems to work for all the tests I can give it.

JavaScript:

$(function () {
    $('textarea').on('keypress', function (event) {
        var text = $('textarea').val();
        var lines = text.split("\n");
        var currentLine = this.value.substr(0, this.selectionStart).split("\n").length;
        console.log(lines);
        console.log(currentLine);
        console.log(lines[currentLine - 1]);
        if (event.keyCode == 13) {
            if (lines.length >= $(this).attr('rows')) return false;
        } else {
            if (lines[currentLine - 1].length >= $(this).attr('cols')) {
                return false; // prevent characters from appearing
            }
        }
    });
});

HTML:

<textarea rows="10" cols="15"></textarea>

DEMO

Answer 3

Instead of looping over each line get the current line number of your cursor and check only the character length of that line. See this SO answer for implementation details.

Then change your else statement to look like this:

else{
    var currLine = getLineNumber();
    if (lines[currLine].length >= $(this.attr('cols')) {
        return false; // prevent characters from appearing
    }
}

Answer 4

A little late, but i made this plugin https://github.com/luisdalmolin/jquery-limitLines .

Can be usefull sometimes.