入力フォームのテキストガイドをjQueryで実装する
公開日：2014年5月20日
最終更新日：2019年4月2日
問い合わせメールなどの入力フォームのガイドとして、テキストボックスに薄いグレーの文字を表示させておくことがあります。HTML5でも実装できますが、jQueryプラグインを使った方法を解説します。
【記事執筆時の確認環境】
jQuery本体 1.11.1
jQuery-formtips 1.2.6
以下にサンプルを示します。入力ボックスにカーソルをおくとガイドの文字は消えます。
実装するには以下の手順を行います。
まずは下記サイトからjQuery Form Tipsプラグインをダウンロードします。
https://code.google.com/p/jquery-formtips/
HTML文書内で、jQuery本体とこのプラグインをインクルードします。
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.formtips.1.2.6.min.js"></script> |
次にプラグインコードをHTML文書内に追加します。
この例は、input要素とtextarea要素に、"formguide"というクラスを指定した時に適用するコードです。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function() { $('input.formguide, textarea.formguide').formtips({ tippedClass: 'tipped' }); }); </script> |
ガイドとして表示する文字色を、"tipped"クラスにCSSで指定します。
CSSファイルに記述しても良いですし、以下のようにHTML文書内にstyle要素で指定しても構いません。
|
1 2 3 |
<style type="text/css"> .tipped { color: #bbb; } </style> |
表示するテキストガイドは、フォーム要素のtitle属性に記述します。
以下はこの記事のサンプルで示したコードになります。
|
1 2 3 4 5 6 |
<form action="" method="post"> <p><label>電話番号：<br /><input type="text" size="40" name="telnumber" id="telnumber" class="formguide" title="090-1234-5678" /></label></p> <p><label>メールアドレス：<br /><input type="text" size="40" name="mailaddress" id="mailaddress" class="formguide" title="info@example.com" /></label></p> <p><label>メッセージ：<br /><textarea rows="6" cols="40" name="message" id="message" class="formguide" title="メッセージをご自由にお書きください"></textarea></label></p> <p><input type="submit" value="送信" /></p> </form> |
スポンサーリンク
