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个字符后-与用5个行填充20个字符相同-将不再允许输入。

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

Answer 2

这对我有用：

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

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

限制HTML5文本区域中的行

2 个答案: