Question

我使用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];
   }
}

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

谢谢。

Answer 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('');
    }
}

Answer 2

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

您必须在textarea标签中像这样通过

[maxLength]="textareaLength"

您也可以这样使用

[attr.maxlength]="maxLength"

您可以在打字稿中设置此变量值，

更多参考，

Angular2 maxLength for textarea as variable

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

我希望它能解决您的问题。

Textarea中每行的最大长度

2 个答案: