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

Posted 2023-05-07

【中文标题】使用 jQuery 限制 textarea 中的行数和显示行数

【英文标题】：Limit number of lines in textarea and Display line count using jQuery

【发布时间】：2011-09-23 23:15:27

【问题描述】：

使用 jQuery 我想：

将用户可以在 textarea 中输入的行数限制为设定的数字 出现一个行计数器，在输入行时更新行数 返回键或 \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。

【问题讨论】：

Limiting number of lines in textarea 的可能重复项

谢谢彼得森，实际上我确实查看了该内容，但没有找到我正在寻找的完整答案。

【参考方案1】：

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', '');
        
    );
);

小提琴： http://jsfiddle.net/XNCkH/17/

【讨论】：

Samuel Liew，非常感谢您！我相信这会对很多人有所帮助。

当我粘贴大量行时，return false 似乎不起作用。有没有办法可以修改它以确保如果超过允许的行数，用户无法提交表单？

您可以在文本区域使用“粘贴”事件

有没有办法将其转换为“点击”（按钮）方法？

【参考方案2】：

这里有一点改进的代码。在前面的示例中，您可以粘贴包含更多行的文本。

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;
        

    );

【讨论】：

在 HTML 部分中，关闭的 div 没有关闭。

【参考方案3】：

对于将新值设置为状态并将其转发给道具的 React 功能组件：

const  onTextChanged,  numberOfLines, maxLength  = props;
const textAreaOnChange = useCallback((newValue) => 
        let text = newValue;
        if (maxLength && text.length > maxLength) return
        if (numberOfLines) text = text.split('\n').slice(0, numberOfLines ?? undefined)
        setTextAreaValue(text); onTextChanged(text)
    , [numberOfLines, maxLength])

【参考方案4】：

一个非常丑陋，但不知何故可行的例子 指定文本区域的行

<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;
        

    );

【讨论】：

您仍然可以使用此代码粘贴超过 3 行。

【参考方案5】：

对于那里的 React 粉丝，以及可能对 vanilla 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 将该值添加到文本区域。