テキストエリアを自動的にリサイズしてくれる「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テキストエリア カスタマイズ (スクロールバー,リサイズ,文字数制限)
  • このエントリーをはてなブックマークに追加

関連記事

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

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

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

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

Comment

Message

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑