テキストドメイン(textarea)の高度な適応実現の2つの方法

2127 ワード

HTML 5が終了するにつれて、ページの人間化に一定の期待が寄せられていると信じています.ここでは、textareaが内容に応じて自動的に高さを調整し、ページを輝かせる2つの方法を紹介します.
方法1、JSで自動調整
<textarea name="mytextarea" cols="80" style="overflow-y:hidden;height:80px;" 
onpropertychange="this.style.height=this.scrollHeight+'px';" 
oninput="this.style.height=this.scrollHeight+'px';"></textarea>

方法2、css制御を使用して、テキストドメインにoverflow-y:visibleスタイルを設定するだけで、比較的簡単で、使用を推奨します
<textarea style="width:300px;overflow-y:visible"></texarea>