Question

我不想知道如何设置可见的行数。

我想限制用户可以在文本区域中输入的文本行数。

例如，我最多需要10行。如果用户可以输入11行，则会使其他使用该数据的应用程序的用户界面混乱。

按行表示，是指用户输入回车符并从新行开始。如果将文本区域中的文本剪切并粘贴到Windows上的记事本中，则最多不应超过10行。例如此说明长14行（不包括换行符）。

我已经知道如何调整可见行并限制字符长度。

编辑：我已经编辑了标题和说明，以使其更加清晰。

Answer 1

执行此操作的方法可能不止一种，但一种明显且相对简单的方法是：侦听文本区域中的输入事件，并删除超出限制的所有换行字符。这是一个通用的解决方案-它不是特定于Angular或Angular Material（但代码是TypeScript）：

<textarea matInput (input)="limitLines($event, 5)"></textarea>

limitLines(event: InputEvent, maxLines: number) {
  let text = (event.target as HTMLTextAreaElement).value;
  if (text.length > 0) {
    const lineCount = 1 + text.replace(/[^\n]/g, '').length;
    if (lineCount > maxLines) {
      const textArray = text.split('\n');
      const newText = textArray.reduce((result, line, lineNum, array) => {
        if (lineNum < maxLines) {
          return result.concat('\n').concat(line);
        }
        return result.concat(line);
      });
      (event.target as HTMLTextAreaElement).value = newText;
    }
  }
}

Angular Material TextArea设置输入行数的限制

1 个答案: