Angular 使用最大5行限制自动调整文本区域大小，然后显示滚动条

说明：在Angular 2中，在我的聊天屏幕上，我想在键入时增加聊天屏幕的大小，最多5行，然后显示滚动条。我该怎么做

问题：表现不符合预期。滚动条限制为5行需要在这里，理想的合同，扩大不工作

要求：它应该在我键入时展开，在我按backspace时收缩。在5行之后，它应该显示滚动条

我的代码：

home.ts

autogrow(){
  let  textArea = document.getElementById("textarea")       
  textArea.style.overflow = 'hidden';
  textArea.style.height = '0px';
  textArea.style.height = textArea.scrollHeight + 'px';
}

home.html

<textarea id="textarea" (keyup)="autogrow()" ></textarea>

---

您可以尝试制作如下指令：

    @Directive({
     selector: 'ion-textarea[autosize]'
     })

export class AutoSizeDirective implements OnInit {

  @HostListener('input', ['$event.target'])
  onInput(target): void {
    this.adjust(target);
  }

  @HostListener('focus', ['$event.target'])
  onFocus(target): void {
    this.adjust(target);
  }

  constructor(public element: ElementRef) {}

  ngOnInit(): void {
    setTimeout(() => this.adjust(), 100);
  }

  adjust(textArea: HTMLTextAreaElement = null): void {
    if (textArea == null) {
        textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    }
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.rows = 1;

    if (textArea.scrollHeight < 200) { //or whatever height you like
      textArea.style.height = textArea.scrollHeight + 'px';
    } else {
      textArea.style.height = 200 + 'px';
    }

  }
}

@指令({
选择器：“文本区域[自动大小]”
})
导出类AutoSizeDirective实现OnInit{
@HostListener（'输入'，['$event.target']））
onInput（目标）：无效{
这个。调整（目标）；
}
@HostListener（'焦点'，['$event.target']））
聚焦（目标）：无效{
这个。调整（目标）；
}
构造函数（公共元素：ElementRef）{}
ngOnInit（）：void{
setTimeout（（）=>this.adjust（），100）；
}
调整（textArea:HTMLTextAreaElement=null）：无效{
if（textArea==null）{
textArea=this.element.nativeElement.getElementsByTagName（'textArea'）[0]；
}
textArea.style.overflow='hidden'；
textArea.style.height='auto'；
textArea.rows=1；
如果（textArea.scrollHeight<200）{//或您喜欢的任何高度
textArea.style.height=textArea.scrollHeight+'px'；
}否则{
textArea.style.height=200+‘px’；
}
}
}

然后在html中，您只需在标记中使用autosize属性，如下所示：

<textarea autosize .....>

您还必须将指令添加到app.module。

---

希望这能解决您的问题。

您可以尝试制定如下指令：

    @Directive({
     selector: 'ion-textarea[autosize]'
     })

export class AutoSizeDirective implements OnInit {

  @HostListener('input', ['$event.target'])
  onInput(target): void {
    this.adjust(target);
  }

  @HostListener('focus', ['$event.target'])
  onFocus(target): void {
    this.adjust(target);
  }

  constructor(public element: ElementRef) {}

  ngOnInit(): void {
    setTimeout(() => this.adjust(), 100);
  }

  adjust(textArea: HTMLTextAreaElement = null): void {
    if (textArea == null) {
        textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
    }
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.rows = 1;

    if (textArea.scrollHeight < 200) { //or whatever height you like
      textArea.style.height = textArea.scrollHeight + 'px';
    } else {
      textArea.style.height = 200 + 'px';
    }

  }
}

@指令({
选择器：“文本区域[自动大小]”
})
导出类AutoSizeDirective实现OnInit{
@HostListener（'输入'，['$event.target']））
onInput（目标）：无效{
这个。调整（目标）；
}
@HostListener（'焦点'，['$event.target']））
聚焦（目标）：无效{
这个。调整（目标）；
}
构造函数（公共元素：ElementRef）{}
ngOnInit（）：void{
setTimeout（（）=>this.adjust（），100）；
}
调整（textArea:HTMLTextAreaElement=null）：无效{
if（textArea==null）{
textArea=this.element.nativeElement.getElementsByTagName（'textArea'）[0]；
}
textArea.style.overflow='hidden'；
textArea.style.height='auto'；
textArea.rows=1；
如果（textArea.scrollHeight<200）{//或您喜欢的任何高度
textArea.style.height=textArea.scrollHeight+'px'；
}否则{
textArea.style.height=200+‘px’；
}
}
}

然后在html中，您只需在标记中使用autosize属性，如下所示：

<textarea autosize .....>

您还必须将指令添加到app.module。

---

希望这能解决您的问题。

使用

rows=“{{rowSize}}”

属性。在你的功能中，

autogrow（）{rowSize++}

如果你在stackbiltz上与你尝试过的东西共享最少的代码，那么社区就可以修复/修改你的代码并共享工作内容copy@NajamUsSaqib任何正在运行的演示？请检查此示例：使用

rows=“{{rowSize}}”

属性。在你的功能中，

autogrow（）{rowSize++}

如果你在stackbiltz上与你尝试过的东西共享最少的代码，那么社区就可以修复/修改你的代码并共享工作内容copy@NajamUsSaqib是否有可用的演示？请检查此示例：