限制 HTML5 textarea 中的行数 [英] Limit rows in HTML5 textarea
问题描述
我正在寻找问题的解决方案,但找不到.它可以在 AngularJS 或 Javascript 中(然后我将在 AngularJS 中翻译它).问题是我必须限制一个简单的 textarea 的行.HTML5 的属性 'rows=x' 只限制视图.我必须限制线条.问题是,即使在图形上线条向下,组件也会将其视为一条独特的线条.用户必须按 ENTER 才能创建新行.但是,我必须限制行.我做了这个指令:
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 继续写就不行.
It works if I press ENTER, but it doesnt work if I continue to write withouth press enter.
推荐答案
我认为你可以用纯 HTML 做到这一点.
I think you can do this with pure HTML.
wrap="hard"
意味着一旦用户到达行尾 - 在本例中为 20 个字符 - 将插入换行符.
The wrap="hard"
means that once the user has reached the end of the line - in this case, 20 characters - a newline will be inserted.
一旦用户达到 100 个字符 - 与用 20 个字符填充 5 行相同 - 将不允许再输入.
Once the user has reached 100 characters - the same as filling in 5 lines with 20 characters - no more input will be allowed.
现在,这并不能阻止某人添加 10 个字符的 10 行 - 但它是否接近您想要做的?
Now, this doesn't stop someone from adding 10 lines with 10 characters - but does it get close to what you want to do?
这篇关于限制 HTML5 textarea 中的行数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!