テキストエリアを自動的にリサイズしてくれる「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 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

no image

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

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

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更

no image

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

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

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

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

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

Comment

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

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

CAPTCHA

*

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

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

新規投稿

  • ブックマーク

    PAGE TOP ↑