eラーニングをすべての人に！blog.eラーニング.co.jp

Webアプリを作成していて、Textareaのサイズに悩んだこと、ありますよね？小さすぎると入力しにくいし、大き過ぎると狭い画面を使っている人に不親切。幅は、固定値でもよいですが、高さは内容に応じて変化するといいですよね。ということで、入力内容によって高さが変化するTextareaを作ってみました。

固定サイズのtextareaの例
100px * 40px　高さがたりなくていらいらする例。　こういう入力フィールドって使いにくいですよね。かといって大きすぎるtextareaも困り者です。最適なサイズって、画面サイズや入力内容に依存します。サイズを決めうちしちゃうと、使いにくい入力インタフェースになってしまいます。

可変サイズのtextareaの例
入力内容に応じてサイズの変わるtextareaの例。これなら、入力内容(行数）が多くても困りませんね。classにauto_resizeと指定しておくだけでつかるのでお手軽です。

ソースコード

<script language="JavaScript" src="http://10000.bz/lms/js/jquery-latest.js"></script>
<script language="JavaScript" src="http://10000.bz/lms/js/jquery.autogrow.js"></script>
<script type="text/javascript">
$(function() {
$(‘textarea.auto_resize’).autogrow();
});
</script>

<strong>固定サイズのtextareaの例</strong>
<textarea style="width: 300px; height: 40px;">略</textarea>

<strong>可変サイズのtextareaの例</strong>
<textarea class="auto_resize" style="width: 300px; height: 40px;">略</textarea>

本記事で利用しているプラグインがInternetExplorerで動作しないという事が分かりました。JavaScriptエラーも発生しているためスクリプトを無効化しました。既に、別の解決方法を見つけているのですが、夜も遅いので、明日改めて記事をまとさせていただきます。

2009年11月22日にリリースした、弊社が自信をもってお勧めする最新ＬＭＳ(学習管理システム)のSmartBrainにも、さきほど上記のタイプのtextareaを導入しました。下記のボタンをクリックして、是非ＳｍａｒｔＢｒａｉｎをお試しください。（現時点では、完全無料のベータ運用となっております。）