テキストエリアの自動拡張 < ウェブ

2008年02月21日

テキストエリアの自動拡張 @ ウェブ

HTMLのフォームを使っていてテキストエリアが狭いなと言うことを感じたこと有りませんか？入力内容に応じて大きくなればよいのにと。

最近自動的に大きくなるフォームのblogなどが有るので、どの様に行っているのか調べてみました。Prototypeのユーザーが多いので、Prototypeの方のソースは見つかったのですが、jQuery用は直ぐに見つかりませんでしたが、有りました。取り敢えず両方書いておきます。

jQuery用

Auto-Growing Textarea Demo
>>関連リンク

Prototype用

Richard McMahon's Weblog
>>関連リンク

Resizing textarea field with Ajax/Prototype
>>関連リンク

少し、jQuery用Auto-Growing Textareaを使ってみたのですが、ちょっと挙動がおかしいところがあるかも。色々と他のフレームワークを使っているので、具合悪くなっているのかもしれません。

使い方としては、下記のようにヘッダーに追加して、対象のテキストエリアにexpandingクラスを適用すれば、設定完了です。

<script type="text/javascript" src="/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.autogrow.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">
textarea.expanding {
line-height: 18px;
}

</style>

当然ですが、jQueryもダウンロードして何処か適当な場所に設置して下さい。

jQuery: The Write Less, Do More, JavaScript Library
>>関連リンク

どうも、Firefoxでコピーペーストすると具合悪いような気がします。大量にエラーが発生して、テキストエリアが拡大しない上に、スクロールも出来なくなります。

他を探します。(T_T)

YUIを使おうかな。

YUI Library Examples: Rich Text Editor (beta): Editor Auto Adjusting Height
>>関連リンク