フォーム入力に役立つjQueryプラグイン

jQuery UI／プラグインの活用（3）

　本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。

はじめに

　第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフォーム入力に注目し、Input Hint Overlay、Text input field filter、jQuery Validation、Simplest Twitter-like dynamic character count、jQuery-narrative-selectについて取り上げます。

　jQuery本体は標準で機能追加する手段が備わっています。「プラグイン」という拡張スクリプトを作成すると、アニメーション効果やフォーム操作補助、メディアの操作など取り扱うことができます。jQuery Plugin公式サイトでは、1,000を超えるプラグインが公開されています。

対象読者

• jQueryプラグインに興味があり、使ってみたい方

必要な環境と準備

jQueryのダウンロード

　執筆時点のjQueryの最新版は、1.4.2です。第1回を参考に、ダウンロードしてください。

jQuery Pluginの使い方

　jQuery Pluginの基本的な使い方は以下の通りです。

1. 使いたいプラグインをダウンロードする
2. jQueryとプラグインを読み込む
3. プラグインの実行

　プラグインによって利用方法が異なるので、配布元の説明やサンプルコードを参考にしてください。

入力ヒントを表示するInput Hint Overlay

　Input Hint Overlayは、入力補助となる説明文を表示できるプラグインです。プラグインは、こちらからダウンロードします。

　InputHintOverlayは、フォーム要素からの表示位置をピクセル単位で指定できます。例えば、$(form).inputHintOverlay(5,3)のように指定すると、要素から下に5px、右に3pxの位置に説明文を表示できます。

　リスト1にInput Hint Overlayプラグインの使用例を示します。ここでは、氏名、電話番号、血液型を入力する単純なフォームを用意し、各項目に説明文を表示させています。

リスト1 Input Hint Overlayプラグインの使用例（jQueryPlugin_inputHintOverlay.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>inputHintOverlayサンプル</title>
//1. jQueryの読み込み
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
//2. inputHintOverlayプラグインの読み込み
<script type="text/javascript" src="js/jquery.inputHintOverlay.js"></script>

<script type="text/javascript">
<!--
//3. inputHintOverlayプラグインの実行
    $(function () {
        $('form#testForm').inputHintOverlay(5, 3);
    });
//-->
</script>
//4. 説明文のスタイルを指定
<style type="text/css">
    .inputHintOverlay { color: #999; font-size: 14px; }
</style>

</head>
    <body>
        <h1 id="title">inputHintOverlayサンプル</h1>
	    <form id="textForm" action="">
		    <fieldset>
            氏名：<input type="text" id="name" title="氏名を入力してください。" size="30"  />
            電話番号：<input type="text" id="phone" title="電話番号を入力してください。" size="30" />
            血液型：<input type="text" id="bloodtype" title="血液型を入力してください。" size="30" />
		    <input type="button" id="submit" value="登録" />
        </fieldset> 
        </form>
    </body>
</html>

　1、2のようにjQueryとプラグインを読み込み、3でプラグインを実行しています。表示させたい説明文のスタイルを4で指定しています。リスト1の実行結果を図1に示します。

図1 Input Hint Overlayの実行結果

　このプラグインを利用すると、項目ごとに何を入力すればよいかあらかじめユーザに示すことができ、入力時の利便性が高まります。