Limit rows in HTML5 textarea

Question

I'm looking for a solution to a problem, but I'm not able to find it. It could be in AngularJS or in Javascript (then I'll translate it in AngularJS). The problem is that I have to limit the rows of a simple textarea. The attribute 'rows=x' of HTML5 limit just the view. I have to limit the lines. The problem is that even if graphycally the lines go down, the components looks at it as a unique line. The user has to press ENTER to create a new line. But, I have to limit the lines. I did this directive:

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 键继续写入，它就不起作用。

Answer 1

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

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

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

一旦用户达到 100 个字符（相当于用 20 个字符填写 5 行），将不再允许输入。

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