検索
連載

あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（4/5 ページ）

jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。

Share
Tweet
LINE
Hatena
前のページへ | 次のページへ

【7】テキストエリアをリサイズする「autoResize」

　テキストエリアにデータを入力しているとき、表示領域の高さ以上のデータを入力するとスクロールバーが表示されます。この場合、入力データを確認するとき、スクロールバーをドラッグしながらデータをスクロールする必要があるため使い勝手があまり良くないといった問題があります。

　使い勝手を改善するには、jQueryの「autoResize」プラグインを使用します。テキストエリアにautoResizeプラグインを適用すると、最終行のデータを入力してリターンキーを押すとテキストエリアの高さが自動的に拡張されます。プラグインの最新版は、下記サイトからダウンロードできます。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

ステップ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>
  1. Webページの基本スタイルが宣言されている
  2. jQueryのライブラリをGoogle CDN経由で取り込む
  3. 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」プラグインを使用します。

ALT
図6　データを入力したら残りの文字数「3」が表示された（画像をクリックすると、別ウィンドウで実行サンプルを表示します）

ステップ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>
  1. Webページの基本スタイルが宣言されている
  2. jQueryのライブラリをGoogle CDN経由で取り込む
  3. maxlengthプラグインのライブラリを取り込む

　maxlengthプラグインの最新版は、下記サイトからダウンロードできます。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

ステップ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.

前のページへ | 次のページへ
ページトップに戻る