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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想使用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。

谢谢大家！

回答：

HTML：

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

js：

$(document).ready(function(){
    var lines = 10;
    var linesUsed = $('#linesUsed');
    $('#countMe').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', '');
        }
    });
});

以上是 限制textarea中的行数并使用jQuery显示行数 的全部内容， 来源链接： utcz.com/qa/414664.html

回到顶部