トップページ -> 実践知識 -> JavaScript による Web プログラミング -> テキストエリア(フォーム部品)の高さの自動拡大
[サイトマップへ], サイト内検索:

テキストエリア(フォーム部品)の高さの自動拡大

サイト構成 連絡先,業績など 実践知識 コンピュータ 教材 サポートページ

この Web では,次のことを行う.


準備

Elastic を使いたいので, http://www.unwrongest.com/projects/elastic/からファイルを入手し,解凍します (ファイル ./1.6.11/jquery.elastic.source.js などができます).

  1. ダウンロード

  2. 解凍するとファイルができる.

◆ JavaScript に関する Web ブラウザの設定


テキストエリア(フォーム部品)の高さの自動拡大を行う HTML + JavaScript

jQuery と Elastic を利用します.

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

    <title>
      テキストエリアの高さの自動拡大      
    </title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/JavaScript" src="./1.6.11/jquery.elastic.source.js"></script>

  </head>
  <body>
    
    <textarea cols=80 wrap=soft     id="description01">
    This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.
    </textarea>
    
    <script type="text/javascript">
      $('#description01').elastic();
    </script>
    
  </body>
</html>

◆ 動作画面の例