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

有关更多信息，请阅读this。

插入文本后textarea不变

1 个答案: