BLOGTIMES
« :: »
2016/11/12

textarea を自動的にリサイズする

  javascript 
このエントリーをはてなブックマークに追加

最近のウェブアプリでは当たり前のように使われている textarea の入力項目を自動的にリサイズする方法を調べたのでメモ。
Autosize というのを使えば簡単に実装できるようです。

いつも通りの cdnjs を使う場合にはこんな感じで OK。

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.18/autosize.min.js"></script> <script> autosize(document.querySelectorAll('textarea')); </script>

CSS で min-height や max-height を指定すると最小、最大を設定することができます。
最大を超えた場合にはスクロールバーが出現するようになっています。


    by hsur at 22:33 [5年前][4年前][3年前][2年前][1年前][1年後][2年後][3年後][4年後][5年後] |
    こんな記事もあります 「document.querySelectorAll Autosize max-height」
    ・Jantter 用に P3 の ID 抽出機能を実現するプラグインを書いてみた
    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/8929
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン

    « :: »
    Copyright © 2004-2023 by CLES All Rights Reserved.