テキストエリアを自動リサイズしてくれるjQueryプラグイン「autoResize」

「autoResize」はテキストエリアを自動リサイズしてくれるjQueryプラグイン。

autoResize – James Padolsey
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Download：
Full: autoresize.jquery.js [4k]
http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js

Minified: autoresize.jquery.min.js [1k]
http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.min.js

対応ブラウザ：
IE6/7, FF2/3, Opera9, Safari3 & Chrome

オプション項目とデフォルト値：

var settings = $.extend({
    onResize : function(){},
    animate : true,
    animateDuration : 150,
    animateCallback : function(){},
    extraSpace : 20,
    limit: 1000
}, options);

・onResize: リサイズ時のコールバック関数
・animate: アニメーションさせるか
・animateDuration: duration(アニメーションさせる時間)
・animateCallback: アニメーション後のコールバック関数
・extraSpace: 基本の高さに対してプラスされる height
・limit: テキストエリアの高さの制限

実装例：
js

<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript">
$(function() {
	$('textarea#comment').autoResize({
		// On resize:
		onResize : function() {
			$(this).css({opacity:0.8});
		},
		// After resize:
		animateCallback : function() {
			$(this).css({opacity:1});
		},
		// Quite slow animation:
		animateDuration : 300,
		// More extra space:
		extraSpace : 40
	});

	$('textarea#comment').trigger('change'); // 初期表示時に自動リサイズさせるためchangeイベント実行
});
</script>

html

<textarea id="comment"></textarea>

自動リサイズさせるためには、change, keyup, keydown イベントのいずれかを発生させる必要がある。
初期表示時にリサイズした状態で表示させたい場合にはこれらのイベントを jQuery の初期化処理の中で実行すればOK。

イベントは以下のようにプラグイン内部で設定されている。

textarea
    .unbind('.dynSiz')
    .bind('keyup.dynSiz', updateSize)
    .bind('keydown.dynSiz', updateSize)
    .bind('change.dynSiz', updateSize);

ただし、Ctrl+v のペーストには反応するが右クリックからのペーストには反応しない。

追記：

プラグイン内部で以下のように textarea を clone() して画面上は見えないが追加されている。
セレクタにクラス名を使って抽出したら２つの textarea が取れたのでなぜだろうと、ちょっとハマった。。

return textarea.clone().removeAttr('id').removeAttr('name').css({
	position: 'absolute',
	top: 0,
	left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);

追記２：

このプラグインを入れるとキーを入力する度に Firebug のコンソールに以下のような警告が出まくってウザイ。

keydown イベントでは charCode プロパティの値には意味がないため使用すべきではありません。
keyup イベントでは charCode プロパティの値には意味がないため使用すべきではありません。

英語表示だと

The 'charCode' property of a keydown event should not be used. The value is meaningless

どうやら jQuery で keyup, keydown イベントを使うと出るようだ。

解決方法としては keyup, keydown イベントを keypress イベントに置き換えるという方法があるが
そうするとテキストエリアにペースト時には反応しなくて微妙。。

参考：
Getting "The 'charCode' property of a keydown event should not be used. The value is meaningless" error in jQuery - Stack Overflow
http://stackoverflow.com/questions/2639055/getting-the-charcode-property-of-a-keydown-event-should-not-be-used-the-value

追記３：

イベントのバインドを以下のように修正した。

textarea
    .unbind('.dynSiz')
    .bind('change.dynSiz', updateSize)
    .bind(($.browser.webkit || $.browser.mozilla ? 'input.dynSiz paste.dynSiz' : 'keyup.dynSiz'), updateSize);

これで FireFox 3.6, Chrome9, Safari 5 は右クリックからのペーストでも反応するようになった。また FireFox では keyup, keydown イベントは使わなくなったので追記２の警告が出なくなった。

参考：
JavaScriptでtextareaのキーボード入力イベントをハンドリングする方法2011年版 | さくらたんどっとびーず
http://sakuratan.biz/archives/3728