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

Question

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

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-Event 调用。因此，用户将始终在他或她输入的字符再次消失之前看到它。
2. 通过设置textarea.value，我有点搞砸了整个 2 路数据绑定原则
3. 我使用any 作为我真的不喜欢的textarea 的类型。如果我使用 TypeScript，我想使用 Types。

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

Answer 1

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

在这种情况下，您不需要使用keyup 事件。只需使用maxlength 属性，它会限制从用户那里获取的最大字符数，并且不会允许超过这个值。

看看它在下面运行 -

/* 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>