在textarea中限制單行中的行數和字母數

Question

問題：
我試圖限制文本框中每行的行數和字母數。

到目前為止我得到了什么：
到目前為止，我設法限制行計數使用此：

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

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

如果達到行數限制，則不允許用戶按下返回鍵（keyCode 13）。

問題：
現在我也試圖限制一行中的字母數量，因為如果我到達我的textarea的末尾（帶有返回鍵）我仍然可以持有一個字母/寫入大量文本，當它到達時它將跳轉到另一行行結束。 這樣，這種限制可能會被“欺騙”，我正在尋找解決方案。

我的想法，沒有解決問題：

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

我試過這個來限制字母數量。 這有效，但它有缺陷。 如果我在一行中找到最大字母（ ANY ），我就可以在任何行中輸入 。

我不知道如何只檢查我正在輸入的行。

Answer 1

用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;
        }
    });

});​

編輯

正如jbabey指出的那樣，ctrl + v或右擊 - >粘貼可能是一個問題。 右鍵單擊很容易被阻止。 對於ctrl + v，你可能也可以檢測到它......只是禁用javascript也會明顯破壞它。 無論如何，作為任何客戶端驗證，您必須在服務器端進行雙重檢查。

Answer 2

這就是我想出來的。 相當干凈，似乎適用於我可以給它的所有測試。

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

獲取光標的當前行號並僅檢查該行的字符長度，而不是遍歷每一行。 有關實施細節，請參閱此SO答案 。

然后將您的else語句更改為如下所示：

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

Answer 4

有點晚了，但我制作了這個插件https://github.com/luisdalmolin/jquery-limitLines 。

有時可以有用。