gpt4 book ai didi

angular - 从textarea中删除所有内容时如何触发功能?

转载 作者:行者123 更新时间:2023-12-05 05:08:54 25 4
gpt4 key购买 nike

要重现该问题,请在文本区域内输入文本,直到它展开。展开后选择所有文本并点击删除。

预期的结果是文本区域应该缩小(如果你再按一个键它会)但实际上什么也没有发生。

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

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



}



}

最佳答案

您添加了一个检查 if (this.commentTextValue),当您删除所有文本时,它不会得到满足。

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

像这样:

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

Working stackbiltz

关于angular - 从textarea中删除所有内容时如何触发功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57981399/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com