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

関連記事

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

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

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

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

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

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

no image

ファイルアップロードフォーム プラグイン

Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

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

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

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモ スクリプ

Comment

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

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑