textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法
2024/05/19
textareaのheight以上に文字を(複数行)入力しても当然heightの値は変わらないが、これを自動で変わるようにしたい。調べたところ「ExpandingTextareas」プラグインで対応できる模様。以下にサンプルとソースコードをメモ。
ExpandingTextareas
公式サイト
http://bgrins.github.io/ExpandingTextareas/
GitHub
https://github.com/bgrins/ExpandingTextareas
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdn.jsdelivr.net/npm/expanding-textareas@1.0.2/dist/expanding.min.js"></script>
サンプル
https://taitan916.info/sample/textareas/
ExpandingTextareasを適用したテキストエリアに3行以上文字を入力すると自動で縦幅が長くなる点が確認できる筈。
利用方法
ソースコード
<div class="mb-50"> <div class="title">普通のテキストエリア</div> <textarea></textarea> </div> <div> <div class="title">ExpandingTextareasを適用したテキストエリア</div> <textarea class="expanding"></textarea> </div> <script src="https://cdn.jsdelivr.net/npm/expanding-textareas@1.0.2/dist/expanding.min.js"></script> <script> const target = document.querySelector('.expanding'); const expanding = new Expanding(target); </script>
textareaのwidthを指定したい場合
以下のようにwidthを指定してもプラグイン側で書き換えられてしまう。
textarea{ width: 300px; }
こちらのページを参考に以下のように指定すること。
.expanding-wrapper{ width: 300px; }
関連記事
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法
エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...
-
-
JavaScriptの変数宣言であるvar / let / constの使い分けについて
JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...