文本区域中每行的最大长度

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>

我在组件 class 中定义了 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的解决方案，

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

[maxLength]="textareaLength"

你也可以这样用，

[attr.maxlength]="maxLength"

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

更多参考，

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

希望能解决您的问题。

Answer 2

我找到了解决办法。我没有使用 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('');
    }
}

文本区域中每行的最大长度

Max Length for Each Line in Textarea

textarea

line

maxlength

typescript

angular