Textarea 中每行的最大长度

Posted 2023-05-07

技术标签:

【中文标题】Textarea 中每行的最大长度【英文标题】：Max Length for Each Line in Textarea 【发布时间】：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];

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

谢谢。

【问题讨论】：

【参考方案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 标签中传递，