勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法

   2024/05/19  JavaScript

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

  関連記事

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...