Limiting number of lines and letters in single line in textarea

问题

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.

回答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.

回答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

回答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
    }
}

回答4:

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

Can be usefull sometimes.

来源：https://stackoverflow.com/questions/11585880/limiting-number-of-lines-and-letters-in-single-line-in-textarea

标签

javascript

jquery

html

textarea