限制 HTML5 文本区域中的行

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 键，它可以工作，但如果我继续不按回车键就无法正常工作。

Answer 1

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

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

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

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

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

Answer 2

这对我有用：

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

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

Answer 3

我遇到了类似的问题，并发现将 textarea 放在父元素中，高度设置为适合内容，将子元素设置为按行高多行的行数，并检查滚动高度是否超过父级的高度可以解决问题。可悲的是，我不使用Angular，所以你必须翻译。我的代码是：

      const maxHeight = parent.offsetHeight;
        child.addEventListener('input', () => {
            if(child.scrollHeight > maxHeight) {
                while(child.scrollHeight > maxHeight) {
                    child.value = child.value.slice(0, -1);
                }
            }
        });

Answer 4

在 CSS 中使用最大高度和最大宽度应该会将其锁定到您要查找的尺寸。

其他控件（如最大行数或设置字符限制）将为您提供额外的工具来为用户设置护栏。