角度2+-限制列和行中的文本区域值

Question

我目前正面临以下问题。我有一个textarea，我不仅想用默认属性rows和cols来限制textarea的大小，而且我还想防止用户输入比这些属性中定义的字符更多的字符。我有一个可行的解决方案，但我不太满意。也许你有一些建议如何改进解决方案

HTML

<textarea rows="2" cols="10" (keyup)="limitTextArea($event)"></textarea>

JS

limitTextArea(evt: KeyboardEvent) {
let textarea = evt.target as any
let maxRows: number = textarea.rows;
let maxColumns: number = textarea.cols;
let newContent: string = (textarea.value as string)
.split('n')
.filter((val, row) => row < maxRows)
.map(val => val.slice(0, maxColumns))
.join('n');
textarea.value = newContent;
}

现在这个解决方案有几个问题。

1. keyup-事件正在调用它。因此，在字符再次消失之前，用户将始终看到他或她键入的字符
2. 通过设置textarea.value，我有点搞砸了整个双向数据绑定原理
3. 我使用any作为textarea的类型，我真的不喜欢它。如果我使用TypeScript，我想使用Types

有什么办法解决这个问题吗？

Answer 1

从逻辑上讲，如果您想要2行，每行10列，则意味着您总共需要20个字符。因此，您可以简单地设置maxlength="20"。您可以随时相应地更改值。。。

在此场景中不需要使用keyup事件。只需使用CCD_ 11属性&它将限制从用户&不会给你更多。

请参阅下面的运行-

/* disable textarea resizing */
textarea {
resize: none;
}

<script src="https://unpkg.com/@angular/platform-browser-dynamic@7.0.1/bundles/platform-browser-dynamic.umd.js"></script>
<textarea rows="2" cols="10" maxlength="20"></textarea>