テキストエリアを自動的にリサイズしてくれる「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
関連記事
-
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
Comment
“jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 | Think deeply, Do less, More effective” https://t.co/gs5fwf4QZT
テキストエリアを自動的にリサイズしてくれる「Autosize」 http://t.co/s9snKWe8Ft
textarea これ使うか
http://t.co/ALyJNPNr3K
>> jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 http://t.co/mJE9rC54Z8
RT @sakai_cyk: テキストエリアを自動的にリサイズしてくれる「Autosize」 http://t.co/XRJq3T9lr4
テキストエリアを自動的にリサイズしてくれる「Autosize」 http://t.co/XRJq3T9lr4
[…] jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 […]
jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 | Think deeply, Do less, More effective http://htn.to/v5JAWM
これシンプルで使いやすい。 → テキストエリアを自動的にリサイズしてくれる「Autosize」 http://kwski.net/jquery/1018/
“jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 | Think deeply, Do less, More effective” http://t.co/4w07g663jK
jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 | Think deeply, Do less, More effective http://bit.ly/185xSOU
jQuery | テキストエリアを自動的にリサイズしてくれる「Autosize」 | Think deeply, Do less, More effective http://htn.to/kqc5Rw