テキストエリアを自動的にリサイズしてくれる「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
関連記事
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
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