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">
<!--
$(document).ready (function() {
$('textarea.expanding').autogrow();
});
//-->
</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
>>関連リンク

閲覧数: 5730 / はてなブックマークusers

関連商品

amazon.co.jp・詳細ページへ

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト