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

Question

我想使用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>对于此示例，可以说将允许的行数限制为10。谢谢大家！

Answer 1

这是很少的改进代码。在前面的示例中，您可以粘贴带有更多行的文本。

的HTML

<textarea data-max="10"></textarea>

<div class="theCount">Lines used: <span id="linesUsed">0</span></div>

JS

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;

        }

    });

Answer 2

一个非常丑陋但以某种方式起作用的示例指定了textarea行

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

然后在js中

   $("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;

        }

    });