Question

要重现该问题，请在文本区域内输入文本，直到其扩展为止。展开后，选择所有文本，然后单击删除。

预期结果是文本区域应缩小（如果再次按一个键，它将缩小）但是实际上什么也没发生。

我已将所有可能的事件附加到“文本”区域

Stack Blitz example （最小，完整和可验证的示例。）

    import { Component, Input, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
      <textarea class="commentText"
              cdkFocusInitial
              #commentTextArea
              [style.height]="textAreaHeight"
              (keyup)="textAreaResize()"
              (keydown)="textAreaResize()"
              (keypress)="textAreaResize()"
              (change)="textAreaResize()"
              (input)="textAreaResize()"
              (focus)="textAreaResize()"
              [maxLength]="300"
              [(ngModel)]="commentTextValue"
              placeholder="Type your Comment">
    </textarea>

  `,
  styles: [`
  .commentText {
  width: 300px;
  min-height: 59px;
  max-height: 100px;
  //height: 59px;
  border-radius: 4px !important;
  border: solid 1px #bab8b8 !important;
  //text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  color: #000000;
  padding: 6px;
  resize: none;
}
  `]
})
export class HelloComponent {

  commentTextValue: string;
  textAreaHeight: any;

  @ViewChild('commentTextArea', { static: false }) commentTextArea: ElementRef;

  constructor(private changeDetectorRef: ChangeDetectorRef
  ) {
  }

  textAreaResize() {
    this.changeDetectorRef.detectChanges();

    const textArea: HTMLTextAreaElement = this.commentTextArea.nativeElement;

    // console.log('textArea.scrollHeight', textArea.scrollHeight);

    if (this.commentTextValue) {
      if (this.commentTextValue.length < 107) {
        this.textAreaHeight = '59px';
      } else {
        const height = Math.max(57, Math.min(textArea.scrollHeight, 98));
        textArea.style.overflow = (textArea.scrollHeight > height ? "auto" : "hidden");

        this.textAreaHeight = height + 'px';
      }
    }



  }



}

Answer 1

您添加了一张支票if (this.commentTextValue)，删除所有文本时，它不会令人满意。

添加条件|| this.commentTextValue == ""

赞：

if (this.commentTextValue || this.commentTextValue == "")

Working stackbiltz

Answer 2

检测文本区域更改的最佳方法-使用反应形式。我在您的代码中添加了很短的代码以获取有效的示例-

https://stackblitz.com/edit/angular-mpphfn?file=src%2Fapp%2Fhello.component.ts

app.module.ts：

  import { ReactiveFormsModule } from '@angular/forms';
  ...
  @NgModule({
     ...
     imports: [
        ReactiveFormsModule
     ],
     ...
  })

*。component.html：

  <form [formGroup]="form">
      <textarea class="commentText"
          ...
          formControlName="textarea"
          placeholder="Type your Comment">
      </textarea>
  </form>

*。component.ts：

  import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
  ...
  @Component({
     ...
  })
  export class HelloComponent {
     form: FormGroup;
     ...
     get textarea() { return this.form.get('textarea') as FormControl };
     ...
     constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
           textarea: [null]
        });
        ...
        this.textarea.valueChanges.subscribe(() => {
           if (!this.textarea.value) {
              console.log('no text!');
           } else {
              console.log('oh, there are some chars in the textarea!');
           }
        });
     }
     ...
  }

为我工作）祝你好运。

Answer 3

我建议：1）使用keyup，2）将事件传递给处理程序，3）检查event.target.value和event.key。像

<textarea class="commentText" (keyup)="textAreaResize($event)"> 

<!-- ... -->


textAreaResize(event) {
    if ((event.key === 'Delete' || event.key==='Backspace') && event.target.value.length === 0 ) {
// here resizing should happen
}

从文本区域删除所有内容时，如何触发功能？

3 个答案: