テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。
ダウンロード CDN

その他、テキストエリアのカスタマイズはこちら
テキストエリア カスタマイズ　スクロールバー / リサイズ / 文字数制限
テキストエリアにプレースホルダーを実装

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.autosize.js" type="text/javascript"></script>

実装

<textarea id="text1018"></textarea>

<script type="text/javascript">
$(document).ready(function(){
    $('textarea').autosize({
//      append: "\n"  // 内部に自動的に付与する
    });  
});
</script>

初期表示もテキストの文字数に合わせて、サイジングしてくれます。

オプション

リサイズの際のコールバックなどが設定できるようです。こちら

デモはこちら

サイトより
Compatible with: jQuery 1.7+ in Chrome, Firefox 4+, Safari 5+, Internet Explorer 6+, Opera 11+.

他プラグイン

AutoResize
jQuery Expandable Plugin
Expanding Textareas jQuery Plugin

Related

ページの画像を非同期で読み込んでくれる「Lazy Load」 開閉できるツリー構造を表現できる「jsTree」 テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」 Default ThumbnailJavascriptでユーザエージェントを取得 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 入力テキストの文字数をカウントしてくれる「Textchange」 Default Thumbnailテキストボックス・エリアにプレースホルダーを実装 Default Thumbnailテキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)
  • このエントリーをはてなブックマークに追加

関連記事

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

ページ内のフォントサイズを変更してくれる「Text Resizer」

「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

Comment

@oka_mailer へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PREV
数値入力に便利なステッパーを実装「Numeric Stepper」
NEXT
折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」

新規投稿

  • ブックマーク

    PAGE TOP ↑