Textarea 中每行的最大长度答案

【问题标题】：Max Length for Each Line in TextareaTextarea 中每行的最大长度
【发布时间】：2018-12-21 21:28:47
【问题描述】：

我使用 Angular 5.2.6 并在我的 html 中添加了一些表单文件。该表单中有一个文本区域，我想限制每行中的最大字符数。

这是 HTML 部分：

<textarea siInput [(ngModel)]="myTextarea" style="resize:none;  white-space: nowrap;" rows="20" (ngModelChange)="`handleTextareaChange`($event)" (keydown)="onKeydown($event)" maxlength="{{maxlength}}" id="textID"></textarea>

我在组件类中定义了 maxlength 和 maxLineLength。这也是我迄今为止尝试过的方法:)

onKeydown(event) {
   if (event.key === "Enter") {
     this.pressEnter = true;
     this.maxlength += this.maxLineLength + 1;
   }
   else {
     this.pressEnter = false;
   }
}

handleTextareaChange(text) {

   var mainString = text;
   var allLines = mainString.split("\n");

   var len = mainString.length;
   var numberOfLines = allLines.length;
   var indexOfCurrentLine = allLines.length - 1;

   var previousLines = "";
   for (var i = 0; i < indexOfCurrentLine; i++) {
     previousLines += allLines[i];
   }
}

如果您有任何想法，请与我分享。

谢谢。

【问题讨论】：

标签： angular typescript textarea line maxlength

【解决方案1】：

我找到了解决方案。我没有使用 maxlength 属性，而是在 component.ts 中创建了新函数

这里是 HTML：

<textarea siInput [(ngModel)]="myTextarea" style="resize:none;  white-space: both;" rows="20" (keyup)="onKeyAction()"(keydown)="onKeyAction()" id="textID" maxlength="{{maxTextAreaLength}}"></textarea>

这是组件中的功能：

this.maxTextLineLength: number = 50;
onKeyAction() {
    if (this.myTextarea) {
      var lines = this.myTextarea.split(/(\r\n|\n|\r)/gm);
      for (var i = 0; i < lines.length; i++) {
        if (lines[i].length >= this.maxTextLineLength) {
          lines[i] = lines[i].substring(0, this.maxTextLineLength);
        }
      }
      this.myTextarea = lines.join('');
    }
}

【讨论】：

你能提供更多细节吗？我也面临同样的问题。

【解决方案2】：

这里是最大长度控制的解决方案，

你必须像这样在你的 textarea 标签中传递，

[maxLength]="textareaLength"

你也可以这样使用，

[attr.maxlength]="maxLength"

你可以在打字稿中设置这个变量值，

http://embed.plnkr.co/CkAbaQLQVndoC47OtQRF/

希望它能解决你的问题。

【讨论】：

我已经用作 maxlength="{{maxlength}}" :) 我想限制每一行...当使用输入键时（新行），可以再次输入那条新线