限制 HTML5 文本区域中的行数答案

【问题标题】：Limit rows in HTML5 textarea限制 HTML5 文本区域中的行数
【发布时间】：2019-05-30 19:36:49
【问题描述】：

我正在寻找问题的解决方案，但找不到。它可以在 AngularJS 或 Javascript 中（然后我将在 AngularJS 中翻译它）。问题是我必须限制简单文本区域的行数。 HTML5 的属性 'rows=x' 仅限制视图。我必须限制线条。问题是，即使从图形上看，线条向下，组件也会将其视为一条独特的线条。用户必须按 ENTER 才能创建新行。但是，我必须限制线路。我做了这个指令：

angular.module('app').directive('maxlines', function (): any {
return function (scope: any, element: any, attrs: any) {
    element.bind("keydown keypress", function (event: any) {

        if (event.which === 13) {
            var text = element.val(),
                numberOfLines = (text.match(/\n/g) || []).length + 1,
                maxRows = parseInt(element.attr('rows'));

            if (event.which === 13 && numberOfLines === maxRows) {
                return false;
            }
        }
    });
};
});

如果我按回车，它可以工作，但如果我继续写而不按回车，它就不起作用。

【问题讨论】：

Textarea可以调整大小，行长会有所不同。我建议您阻止调整文本区域的大小并将其字符数限制为仅在线。
我使用 css 来阻止大小。是的，我知道我可以限制字符，这将是最好的解决方案，但换行符 (\n) 被视为 1 个字符，所以如果我设置 800 个字符，用户可以按 799 次 ENTER 然后在最后一行
然后阻止输入动作
我必须让用户按回车来为新段落创建一个空白：/
好的，只有最后一个字符不是换行符时才授权输入。

标签： javascript angularjs html angularjs-directive textarea

【解决方案1】：

我认为你可以用纯 HTML 做到这一点。

<textarea cols="20" rows="5" wrap="hard" maxlength="100">

wrap="hard" 表示一旦用户到达行尾 - 在本例中为 20 个字符 - 将插入一个换行符。

一旦用户达到 100 个字符 - 与用 20 个字符填写 5 行相同 - 将不再允许输入。

现在，这不会阻止某人添加 10 行 10 个字符 - 但它是否接近您想要做的？

【讨论】：

是的，我太用力包裹了！它进入新行，但它被认为（来自我的 angularJS 指令）作为一个独特的行，所以它只是在图形上不幸地进入一个新行

【解决方案2】：

这对我有用：

#your-textarea {
    max-height: 5rem;
    min-height: 2rem;
}

用户应该能够在该阈值内调整大小。

【讨论】：