Question

我找到了一些限制textarea中使用的行的脚本，如下所示：

 $(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的新行并且当你复制粘贴文本时会出现问题，然后它会失败限制使用的行。

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

重要：解决方案需要适用于textarea

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

好吧，我无法弄清楚如何计算textarea中文本的高度，所以我使用了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

MAJOR EDIT

OP指出我实际上忘了解决最重要的问题，我更新了我的代码。我基本上删除了对enter键的检查，并允许删除和退格键，以防文本超出限制，如下所示。您可能需要稍微调整它以使其符合您的确切需求。

$(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是否已包装或不包装）来计算多少行是太多的工作？字体大小，不同的字母宽度，空格等...）。最简单的方法是将两个textareas（一个可见，一个不 - 高度设置为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();
});

最大行textarea

3 个答案:

JS：

MAJOR EDIT