4

问题：
我试图限制文本框中每行的行数和字母数。

到目前为止我得到了什么：
到目前为止，我设法使用以下方法限制行数：

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

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

如果达到行数限制，这将不允许用户按下返回键（keyCode 13）。

问题：
现在我也在尝试限制单行中的字母数量，因为如果我到达我的文本区域的末尾（带回车键）我仍然可以持有一个字母/写大量文本，它会跳转到另一行当它到达行尾时。这样，这种限制可能会被“欺骗”，我正在寻找解决方案。

我的想法，没有解决问题： 

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），我就不能再输入任何一行了。

我不知道如何只检查我现在输入的行。

4

4 回答 4

5

在 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 显然也会破坏这个东西。无论如何，与任何客户端验证一样，您必须在服务器端仔细检查。

于 2012-07-20T20:05:23.517 回答
5

这就是我想出的。相当干净，似乎适用于我能提供的所有测试。

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>

演示

于 2012-07-20T20:49:02.090 回答
2

无需遍历每一行，而是获取光标的当前行号并仅检查该行的字符长度。有关实施详细信息，请参阅此SO 答案。

然后将您的 else 语句更改为如下所示：

else{
    var currLine = getLineNumber();
    if (lines[currLine].length >= $(this.attr('cols')) {
        return false; // prevent characters from appearing
    }
}
于 2012-07-20T19:53:51.403 回答
0

有点晚了，但我做了这个插件https://github.com/luisdalmolin/jquery-limitLines。

有时可能很有用。

于 2013-05-21T12:07:06.610 回答