入力フォーム(Textarea)のサイズ

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

固定サイズのtextareaの例

可変サイズのtextareaの例

ソースコード

<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日にリリースした、弊社が自信をもってお勧めする最新LMS(学習管理システム)のSmartBrainにも、さきほど上記のタイプのtextareaを導入しました。下記のボタンをクリックして、是非SmartBrainをお試しください。(現時点では、完全無料のベータ運用となっております。)



start

Facebookページもよろしくお願いします

CATEGORIES eラーニングby.a.takeuchi9 Comments2009.11.25
TAGS , ,  
記事の投稿者
a.takeuchi a

Facebook comments:

コメントをどうぞ

Eメールアドレスは公開されません。

Trackback URL

管理者の承認後に表示します。無関係な内容や、リンクだけで意見や感想のないものは承認しません。

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ