最大线文本区域

Question

我发现一些脚本会限制文本区域中使用的行，如下所示：

 $(document).ready(function(){

        var lines = 10;
        var linesUsed = $('#linesUsed');
        var newLines=0;

        $('#rev').keydown(function(e) {

            newLines = $(this).val().split("\n").length;
            linesUsed.text(newLines);

            if(e.keyCode == 13 && newLines >= lines) {
                linesUsed.css('color', 'red');
                return false;
            }
            else {
                linesUsed.css('color', '');
            } 
        }); 

当您按 enter 并将其限制为 10 时它工作正常。但是当您键入的句子太长时会出现问题，它们会自动转到没有 \n 的新行，并且当您复制粘贴文本时，它会失败限制使用的行数。

有谁知道如何解决这个问题。

重要提示：解决方案需要适用于文本区域

Answer 1

您可以尝试使用以下逻辑：

JS :

var limit = 3; // <---max no of lines you want in textarea
var textarea = document.getElementById("splitLines");
var spaces = textarea.getAttribute("cols");

textarea.onkeyup = function() {
   var lines = textarea.value.split("\n");

   for (var i = 0; i < lines.length; i++) 
   {
         if (lines[i].length <= spaces) continue;
         var j = 0;

        var space = spaces;

        while (j++ <= spaces) 
        {
           if (lines[i].charAt(j) === " ") space = j;  
        }
    lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
    lines[i] = lines[i].substring(0, space);
  }
    if(lines.length>limit)
    {
        textarea.style.color = 'red';
        setTimeout(function(){
            textarea.style.color = '';
        },500);
    }    
   textarea.value = lines.slice(0, limit).join("\n");
};

这里是UPDATED DEMO

Answer 2

好吧，我不知道如何只计算文本区域内文本的高度，所以我改用了contenteditable div。希望你喜欢这个解决方案。

HTML

<div id="container">
    <div id="rev" contenteditable="true"></div>
</div>

CSS

#container {
    height:100px;
    width:300px;
    cursor:text;
    border:1px solid #000
}
#rev {
    line-height:20px;
    outline:none
}

JS

$(document).ready(function () {
    $('#container').click(function() {
        $('#rev').focus();
    });

    var limit = 3;
    var lineHeight = parseInt($('#rev').css('line-height'));

    $('#rev').keydown(function (e) {
    var totalHeight = parseInt($('#rev').height());
    var linesUsed = totalHeight / lineHeight;

        if (e.keyCode == 13 && linesUsed >= limit) {
            $('#rev').css('color', 'red');
            return false;
        } else {
            $('#rev').css('color', '');
        }
    });
});

HERE IS A DEMO YOU CAN FIDDLE WITH

主要编辑

在 OP 指出我实际上忘记解决最重要的问题之后，我更新了我的代码。我基本上删除了对回车键的检查，并允许删除和退格键，以防文本超出限制，如下所示。您可能需要稍微摆弄一下才能使其适合您的确切需求。

$(document).ready(function () {
    $('#container').click(function() {
        $('#rev').focus();
    });

    var limit = 3;
    var lineHeight = parseInt($('#rev').css('line-height'));

    $('#rev').keydown(function (e) {
    var totalHeight = parseInt($('#rev').height());
    var linesUsed = totalHeight / lineHeight;

        if (linesUsed > limit) { // I removed 'e.keyCode == 13 &&' from here
            $('#rev').css('color', 'red');
            if (e.keyCode != 8 && e.keyCode != 46) return false; // I added this check
        } else {
            $('#rev').css('color', '');
        }
    });    
        
    // I added the following lines
    $('#rev').on('paste', function () { 
        if (linesUsed > limit) {
            $('#rev').css('color', 'red');
            if (e.keyCode != 8 && e.keyCode != 46) return false;
        } else {
            $('#rev').css('color', '');
        }
    });
});

UPDATED DEMO HERE

Answer 3

尝试根据每行中的数字字符和 textarea 宽度来计算有多少行（textarea 是否有环绕？字体大小、不同的字母宽度、空格等...） .最简单的方法是设置两个具有相同宽度和字体样式的文本区域（一个可见，一个不高度设置为 0），并检查不可见文本区域的滚动高度。

这是一个例子http://jsfiddle.net/SKYt4/1/

HTML

<textarea id="visible_textarea"></textarea>
<textarea id="hidden_textarea"></textarea> <!-- hidden by setting the height to 0 -->
<div id="used_lines"></div>

CSS

textarea {line-height:16px; /* line height to calculate number of lines */
    width:150px; /* need to match width */}
#hidden_textarea {height:0px;
    padding:0px;
    border:none;
    margin:0px;
    opacity:0;}

JavaScript

$('#visible_textarea').keyup(function(){
    $('#hidden_textarea').val(this.value);
    // checking how many lines
    var lns = Math.ceil(document.getElementById('hidden_textarea').scrollHeight / parseInt($('#hidden_textarea').css('line-height')));

    if (lns > 10) {
         $('#used_lines').css('color', '#ff0000');
    }
    else {
        $('#used_lines').css('color', '');
    }

    $('#used_lines').html(lns+' lines');
});


$('#visible_textarea').change(function(){
    $(this).keyup();
});