あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（4/5 ページ）
【7】テキストエリアをリサイズする「autoResize」
テキストエリアにデータを入力しているとき、表示領域の高さ以上のデータを入力するとスクロールバーが表示されます。この場合、入力データを確認するとき、スクロールバーをドラッグしながらデータをスクロールする必要があるため使い勝手があまり良くないといった問題があります。
使い勝手を改善するには、jQueryの「autoResize」プラグインを使用します。テキストエリアにautoResizeプラグインを適用すると、最終行のデータを入力してリターンキーを押すとテキストエリアの高さが自動的に拡張されます。プラグインの最新版は、下記サイトからダウンロードできます。
ステップ1：CSSとライブラリをCDN経由で組み込む
お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。
<head> <link href="style.css" rel="stylesheet" type="text/css" />……【1】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】 <script src="jquery.watermarkinput.js" type="text/javascript"></script>……【3】 </head>
- Webページの基本スタイルが宣言されている
- jQueryのライブラリをGoogle CDN経由で取り込む
- autoResizeプラグインのライブラリを取り込む
ステップ2：XHTMLで骨格を定義する
<body>要素に<textarea#resize-demo>要素を追加したら、style属性を追加してwidthとheightプロパティにテキストエリアの幅と高さを設定します。
<textarea id="resize-demo" style="width: 400px; height: 50px;"> ここにテキストを入力してください。 最終行を入力すると高さが自動的に拡張します！ </textarea>
ステップ3：プラグインを組み込む
<head>要素に<script>要素を追加したら、次のようなコードを追加してautoResizeプラグインを組み込むと完成です（実行サンプルを表示）。
$('textarea#resize-demo').autoResize();
ここでは、jQueryのセレクタで<textarea>要素を検索してautoResize()メソッドを実行しています。これで、テキストエリアに入力したデータ量が50pxの高さを超えたら自動的に高さが拡張されます。
【8】テキストエリアに入力するデータを制約「maxlength」
テキストエリアに入力するデータを制約するには、jQueryの「maxlength」プラグインを使用します。
ステップ1：CSSとライブラリをCDN経由で組み込む
お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、<head>要素に<link>要素と<script>要素を追加して、CSSとjQueryのライブラリを組み込みます。
<head> <link href="style.css" rel="stylesheet" type="text/css" />……【1】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】 <script src="jquery.maxlength.js" type="text/javascript"></script>……【3】 </head>
- Webページの基本スタイルが宣言されている
- jQueryのライブラリをGoogle CDN経由で取り込む
- maxlengthプラグインのライブラリを取り込む
maxlengthプラグインの最新版は、下記サイトからダウンロードできます。
ステップ2：XHTMLで骨格を定義する
入力文字を10文字以内に制約したいときは、<textarea>要素にmaxlength属性を追加して「10」を設定します。
<p>残り文字数: <span class="charsLeft">10</span></p> <textarea maxlength="10" rows="3" cols="20" class="limited"></textarea>
ステップ3：プラグインを組み込む
<head>要素に<script>要素を追加したら、次のようなコードを追加してmaxlengthプラグインを組み込むと完成です。
<script type="text/javascript">
$(function() {
$('textarea.limited').maxlength({
'feedback': '.charsLeft'
});
});
</script>
ここでは、jQueryのセレクタで<textarea>要素を検索してmaxlength()メソッドを実行します。このメソッドの引数にfeedbackオプションを追加すると、残りの文字数を表示できます。feedbackオプションには、残りの文字数を表示する要素のセレクタを指定します。
次ページでは、フォームを使いやすくするプラグインとして、AdvisorとValidationの使い方を説明します。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。