текстовая область не изменяется после вставки текста

Question

У меня есть функция, которая изменяет высоту текстовой области при достижении 25 символов, и она отлично работает, когда вы пишете текст.

Проблема в том, что мне нужно иметь несколько предопределенных ответов, и я делаю это на модале, который вставляет текст, но функция не обнаруживает это и не изменяет размер. Если вы вставите текст, а затем напишите одну букву, она развернется.

Моя функция:

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: я использую ионный каркас

Отправка данных при закрытии поповера:

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

Заполнение текстовой области данными (и вызов функции изменения размера):

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';
}

Для получения дополнительной информации прочитайте это .