插入文本后textarea没有改变

Question

我有一个功能可以在达到 25 个字符时更改 textarea 的高度，并且在您编写文本时效果很好。

问题是，我需要一些预定义的回复，并且我在插入文本的模式上执行此操作，但该函数没有检测到并且不会调整大小。如果您插入文本然后写一个字母，它会扩展。

我的功能：

adjust() {

  let ionTextarea = document.getElementById('myInput');
  let textarea = ionTextarea.getElementsByTagName('textarea')[0];
  if (textarea) {
    if (textarea.value.length > 25) {
      textarea.style.overflow = 'scroll';
      textarea.style.height = '200px';
    } else {
  textarea.style.height = '20px';
}
}return;}

textarea 在两种情况下都返回相同的数据：写入和插入文本（因此样式应该可以工作），但在插入时它不会改变。

我尝试使用 (ionChange)="", (keyup)=""... 但不起作用。

<ion-textarea id="myInput" #chat_input placeholder="Mensaje" [(ngModel)]="editorMsg" rows="1" (ionFocus)="scrollToBottom()" (ionChange)="adjust()"></ion-textarea>

有人可以帮我吗？谢谢

Ps：我用的是离子框架

关闭popover时发送数据：

close(item) {
  let data = item;
  this.viewCtrl.dismiss(data);
}

用数据填充textarea（并调用resize函数）：

popover.onDidDismiss(data => {
  this.editorMsg = data;
  this.adjust();
})

Answer 1

使用这个：

HTML：

<ion-textarea id="myInput" #chat_input placeholder="Mensaje" [(ngModel)]="editorMsg" rows="1" (ionFocus)="scrollToBottom()" (ionChange)="adjust()"></ion-textarea>

CSS：

#myInput {
    width: calc(100% - 10px);
    border: 0;
    border-radius: 0;
    background: transparent;
}

TS：

@ViewChild('myInput') myInput: ElementRef;


adjust() {
//let textarea: any = event.target;
let ionTextarea = document.getElementById('myInput');
let textarea = ionTextarea.getElementsByTagName('textarea')[0];

console.log(textarea);

if (textarea) {
  if (textarea.value.length > 25) {
    textarea.style.overflow = 'scroll';
    this.myInput.nativeElement.style.height = '200px';
  } else {
    this.myInput.nativeElement.style.height = '20px';
  }
}
return;}                

要动态地和实时地改变（更好的方法），请执行以下操作：

HTML：

<textarea #myInput id="myInput" rows="1" maxLength="500" (keyup)="resize()" [(ngModel)]="myStuff"></textarea>

CSS：

#myInput {
    width: calc(100% - 10px);
    border: 0;
    border-radius: 0;
    background: transparent;
}           

TS：

@ViewChild('myInput') myInput: ElementRef;

resize() {
    this.myInput.nativeElement.style.height = this.myInput.nativeElement.scrollHeight + 'px';
}

更多信息请阅读this。