【命令編】ionic 3適応サイズtextarea命令
1228 ワード
この指令は私が発明したものではありません.海外で見たので、どこかで記録してください.命令のいくつかの簡単な説明については、私のこの文章を見ることができます:【開発ガイド](五)ionic 3はコンポーネントと命令をよく使うべきです.
命令について知っている場合は、まず命令を作成します.
ionic g directive autosize
ファイル編集を開く:
それから勝手にhtmlページを探して、以下の内容のテストを加えて効果を見て、効果図は私にはありません:
原理はinputイベントを傍受し,入力毎に
命令について知っている場合は、まず命令を作成します.
ionic g directive autosize
ファイル編集を開く:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[autosize]' // Attribute selector
})
export class AutosizeDirective {
@HostListener('input', ['$event.target'])
onInput(textArea:HTMLTextAreaElement):void {
this.adjust();
}
constructor(public element:ElementRef) {
console.log('Hello AutosizeDirective Directive');
}
ngOnInit():void {
setTimeout(() => this.adjust(), 0);
}
adjust():void {
const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
textArea.style.overflow = 'hidden';
textArea.style.height = 'auto';
textArea.style.height = textArea.scrollHeight + 'px';
}
}
それから勝手にhtmlページを探して、以下の内容のテストを加えて効果を見て、効果図は私にはありません:
原理はinputイベントを傍受し,入力毎に
adjust
メソッドを実行してスタイルを調整することである.