サイトアイコン わんすけに聞いてみる

[JSライブラリ]autosize.jsの使い方を試す。

今日はいろいろ資料作りがあって遅くなってしまったから簡単なやつ。。。

 

1.autosize.jsって何だ。

すごくシンプル。

適用すると、textarea内での改行に応じてテキストエリアの大きさを伸ばして調整してくれる。

テキストエリアってデフォだとFireFoxとEdgeとかでそれぞれ見え方違ったりして、結構困ることあるのよねー

CSSの細かい定義が苦手めなわんすけさんには嬉しいプラグインです。

 

本家はこちら。 GitHub - jackmoore/autosize

 

2.さっそく使ってみる。

定義は簡単。

ソース落として、distフォルダの中のautosize.min.jsを参照したら

autosize()にDOM要素を渡すだけ。

querySelectorAllとかで纏めて渡しても全部のtextareaに適用してくれる優しさ付き。

これがautosize適用したテキストエリア
<textarea id='indent_txa'>Enter打ってミソ。</textarea>

<script type="text/javascript">
<!--
autosize(document.querySelector('#indent_txa'));
-->
</script>

3.実装の確認

 

これはデフォのテキストエリア

これがautosize適用したテキストエリア

 

モバイルバージョンを終了