ソースコードから理解する技術－ＵｎｄｅｒＳｏｕｒｃｅＣｏｄｅ

手を動かす(プログラムを組む)ことで技術を理解するブログ

Play framework(9) - jQueryを使用してtextareaの高さを自動調整する

フレームワーク

textareaの高さを、入力した行数に応じて自動的に変える
autoResizeというjQueryがあります。

これを、Play frameworkで使ってみました。
以下に手順を書いておきます。
autoResize以外のjQueryでも、.jsファイルの配置やヘッダーの定義は同じになるはずです。

1.autoResizeの配置
autoResizeのページより、autoresize.jquery.js をダウンロードする。
autoresize.jquery.js を、アプリのルートフォルダ\public\javascripts に配置する。

2.ヘッダーにパスを定義
ヘッダーにautoresize.jquery.js のパスを定義する。
今回はmain.htmlのヘッダーに記述する。



    <head>

        (中略)

        #{get 'moreStyles' /}

        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">

        <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript"charset="${_response_encoding}"></script>

        <script src="@{'/public/javascripts/autoresize.jquery.js'}" type="text/javascript" charset="${_response_encoding}"></script>

        #{get 'moreScripts' /}

    </head>

3.htmlファイルにtextareaを書く

4.htmlファイルにjQueryのコードを書く
コードは、$("textarea#textareaのid").autoResize(); の形式で書く。

3.4.のHTMLファイルは以下の通り。



#{extends 'main.html' /}

#{set title:'Home' /}
<script type="text/javascript">

$(function() {

 $("textarea#content").autoResize();

});

</script>

<p>

    <label for="title">title: </label>

    <br>

    <input type="text" name="title" id="title" value="${_memo?.title}" />

</p>

<p>

    <label for="content">content: </label>

    <br>

    <textarea name="content" id="content" rows="5">${_memo?.content}</textarea>

</p>

Play framework上ではこんな感じの画面になりました。
f:id:UnderSourceCode:20111129233051j:plain

textareaの高さが変わるデモはautoResizeのページの「Demo」を参考にした下さい。