Question

我目前面临以下问题。我有一个 textarea ，我不仅想用默认属性 textarea来限制 rows 的大小和 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;
}

现在此解决方案存在几个问题。

keyup事件正在调用它。因此，用户在再次消失之前将始终看到他或她键入的字符。
我通过设置textarea.value
我使用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>

Angular 2+-限制列和行中的textarea值

1 个答案: