Javascript 限制textarea中的行数并使用jQuery显示行数

使用jQuery，我想：

• 将用户可以在文本区域中输入的行数限制为设置的数字
• 显示一个行计数器，在输入行时更新行数
• 返回键或/n将计为行

感谢所有能帮助你的人

$(document).ready(function(){
  $('#countMe').keydown(function(event) {
    // If number of lines is > X (specified by me) return false
    // Count number of lines/update as user enters them turn red if over limit.

  });   
});


<form class="lineCount">
  <textarea id="countMe" cols="30" rows="5"></textarea><br>
  <input type="submit" value="Test Me">
</form>

<div class="theCount">Lines used = X (updates as lines entered)<div>

$（文档）.ready（函数（）{
$（'#countMe'）.keydown（函数（事件）{
//如果行数>X（由我指定），则返回false
//当用户输入行数/更新行数时，计数行数/更新行数超过限制时变为红色。
});   
});


使用的行数=X（随着输入的行数而更新）

对于这个例子，让我们假设允许的行数限制为10

谢谢大家

html：

<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>

小提琴：

---

这是一个丑陋得多，但却能起作用的例子 指定文本区域的行

<textarea rows="3"></textarea>

然后 在js中

$（“textarea”）.on（'keydown-keypress-keyup'，函数（e）{
如果（e.keyCode==8 | | e.keyCode==46）{
返回true；
}
var maxRowCount=$（this）.attr（“行”）| | 2；
var lineCount=$（this）.val（）.split（'\n'）.length；
如果（e.keyCode==13）{
如果（lineCount==maxRowCount）{
返回false；
}
}
var jsElement=$（this）[0]；
if（jsElement.clientHeight

这里有一些改进的代码。在上一个示例中，您可以使用所需的更多行粘贴文本

HTML

---

对于那里的React粉丝，可能还有一个香草JS事件处理程序的灵感：

onChange={({ target: { value } }) => {
    const returnChar = /\n/gi
    const a = value.match(returnChar)
    const b = title.match(returnChar)
    if (value.length > 80 || (a && b && a.length > 1 && b.length === 1)) return
    dispatch(setState('title', value))
}}

此示例将文本区域限制为2行或总共80个字符

---

它防止使用新值更新状态，防止React将该值添加到文本区域。

可能重复感谢Petersen，事实上我确实查看了它，但没有找到我想要的完整答案。Samuel Liew，非常感谢！我相信这会对很多人有帮助。当我粘贴大量行时，返回false似乎不起作用。是否有一种方法可以对其进行修改，以确保用户在超出允许行数的情况下无法提交表单？您可以在文本区域上使用“粘贴”事件是否仍有将其转换为“单击”（按钮）方法？在HTML部分，关闭div未关闭。

   $("textarea").on('keydown keypress keyup',function(e){
       if(e.keyCode == 8 || e.keyCode == 46){
           return true;
       }
       var maxRowCount = $(this).attr("rows") || 2;
        var lineCount = $(this).val().split('\n').length;
        if(e.keyCode == 13){
            if(lineCount == maxRowCount){
                return false;
            }
        }
        var jsElement = $(this)[0];
        if(jsElement.clientHeight < jsElement.scrollHeight){
            var text = $(this).val();
            text= text.slice(0, -1);
            $(this).val(text);
            return false;
        }

    });

<textarea data-max="10"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span></div>

jQuery('document').on('keyup change', 'textarea', function(e){

        var maxLines = jQuery(this).attr('data-max');        
        newLines = $(this).val().split("\n").length;

        console.log($(this).val().split("\n"));

        if(newLines >= maxLines) {
            lines = $(this).val().split("\n").slice(0, maxLines);
            var newValue = lines.join("\n");
            $(this).val(newValue);
            $("#linesUsed").html(newLines);
            return false;
        }

    });

onChange={({ target: { value } }) => {
    const returnChar = /\n/gi
    const a = value.match(returnChar)
    const b = title.match(returnChar)
    if (value.length > 80 || (a && b && a.length > 1 && b.length === 1)) return
    dispatch(setState('title', value))
}}