Javascript 限制HTML5文本区域中的行

Javascript 限制HTML5文本区域中的行,javascript,angularjs,html,angularjs-directive,textarea,Javascript,Angularjs,Html,Angularjs Directive,Textarea,我正在寻找一个问题的解决方案,但我找不到。它可以是AngularJS或Javascript(然后我将用AngularJS进行翻译)。问题是我必须限制简单文本区域的行。HTML5的属性“rows=x”仅限制视图。我必须限制线路。问题是,即使这些线在图形上向下移动,组件也会将其视为唯一的线。用户必须按ENTER键才能创建新行。但是,我必须限制线路。 我做了这个指令: angular.module('app').directive('maxlines', function (): any { retu

我正在寻找一个问题的解决方案,但我找不到。它可以是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键继续写,它就不工作。

我想你可以用纯HTML来做这件事

wrap=“hard”
意味着一旦用户到达行尾(本例中为20个字符),将插入一个换行符

一旦用户达到100个字符(与用20个字符填充5行相同),将不允许再输入

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

这对我来说很有效:

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

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

Textarea可以调整大小,行长将不同。我建议你阻止调整文本区域的大小,并限制它的字符数,使其仅在行上。我使用css来阻止大小。是的,我知道我可以限制字符,这将是最好的解决方案,但换行符(\n)被视为1个字符,因此如果我设置800个字符,用户可以按799次ENTER键,然后在最后一行写入一个单词,然后阻止ENTER操作我必须让用户按ENTER键为新段落创建空白:/Ok,明白了,然后只有在最后一个字符不是换行符时才授权输入。是的,我太努力了!它放在新行中,但它被认为(从我的angularJS指令)是唯一的一行,所以它放在新行中只是图形化的,令人遗憾