限制 HTML5 textarea 中的行数

Question

我正在寻找问题的解决方案，但找不到。它可以在 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;
            }
        }
    });
};
});

如果我按 ENTER，它会工作，但如果我不按 Enter 继续写，它就不会工作。

原文由 panagulis72 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我 认为 您可以使用纯 HTML 来做到这一点。

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

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

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

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

原文由 Terence Eden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我为此需求创建了一个解决方案 - 添加 max-rows 属性支持：

 <textarea
  rows="1"
  max-rows="3"
></textarea>

https://github.com/c4710n/textarea-max-rows

未作为 NPM 发布，您可以根据我的代码制定自己的解决方案。

原文由 c4710n 发布，翻译遵循 CC BY-SA 4.0 许可协议