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

関連記事

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

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

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

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

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

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

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

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

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

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

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

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

Comment

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

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑