How to create Textbox auto size and after type some line autometically added scroll
How to create Textbox auto size and after type some line autometically added scroll and then remove text autometically becomes in previous state
Code:-
// Usage example: <textarea autoresize></textarea>
import { ElementRef, HostListener, Directive, AfterContentChecked } from '@angular/core';
@Directive({
selector: 'textarea[autosize]'
})
export class AutosizeDirective implements AfterContentChecked {
@HostListener('input', ['$event.target'])
onInput(textArea: HTMLTextAreaElement): void {
this.adjust();
}
constructor(public element: ElementRef) {
}
ngAfterContentChecked(): void {
this.adjust();
}
adjust(): void {
const element = this.element.nativeElement;
const maxsize = 188;
const bottompadding = 1;
if (element.scrollHeight <= maxsize) {
element.style.overflow = 'hidden';
element.style.height = 'auto';
element.style.height = (element.scrollHeight - bottompadding) + 'px';
} else {
element.style.overflow = 'auto';
element.style.height = maxsize + 'px';
}
}
}
<textarea matInput placeholder="Address" cols="20" id="Address" name="Address" formControlName="Address"
rows="1" maxlength="500" autosize></textarea>
No comments:
Post a Comment
Thank You For Your Great Contribution