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

【问题标题】：Angular Material TextArea set limit on number of lines enteredAngular Material TextArea 对输入的行数设置限制
【发布时间】：2019-08-01 05:05:45
【问题描述】：

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

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

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

我的意思是当用户输入回车并从新行开始时。如果您将文本区域中的文本剪切并粘贴到 Windows 上的记事本中，则不应超过 10 行。例如此描述长 14 行（不包括换行的文本）。

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

编辑：我已经编辑了标题和描述以使其更清晰。

【问题讨论】：

stackoverflow.com/questions/6501043/…
更改您的问题标题。正如您在描述中解释的那样，您并不是指最大行数。详细说明您的意思，因为它显然既不是最大行数也不是最大长度（字符数），但您仍然将其描述为“最大行数”。
@G.Tranter 为了清晰起见，我进行了编辑。希望现在有意义。

标签： javascript html angular angular-material

【解决方案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;
    }
  }
}

【讨论】：