フォームのテキストボックスなどの入力フィールドが未入力の場合に、入力内容のヒントなどを表示する、jQueryのプラグイン「Input tips」を作ってみました。
このようなプラグインはいくつかありますが、value属性に設定するものが多く、パスワードフィールドなど、テキストをマスクするようなコントロールでは使えません。また、実装によっては、value属性の値の特殊処理を入れなければならないことがあります。
このプラグインは、入力フィールドに重ねてテキストを表示する方式ですので、パスワードフィールドでも使用することができ、特殊処理などは考えずに使用することができます。
表示例：
ダウンロード
ダウンロード: jquery.inputtips-latest.zip
必要なライブラリ
jQuery 1.4.2+
使い方
Input tipsプラグインを読み込みます。
<script type="text/javascript" src="jquery.inputtips-1.0.0.js"></script>
inputTips()を呼び出します。
$(function(){ $(selector).inputTips(); });
オプション（キーと値のハッシュ）
| キー | 型 | 初期値 | 説明 |
|---|---|---|---|
| tipsClass | String | “input-tips” | Tipsの要素に付与されるクラス。CSSでスタイルを調整するには、このクラスを使用します。 |
| textAttr | String | “title” | Tipsのテキストに使用する属性。 |
例：Tipsの要素に付与されるクラスに "my-tips"、テキストに使用する属性に"tips"を指定するには、次のように記述します。
$(function(){ $(selector).inputTips({ tipsClass: "my-tips", textAttr: "tips", }); });
その他
type属性が"text"、"password"、"textarea"のみに有効です。内部でフィルタリングしています。textAttr属性の値が空の場合は、なにも表示しません。- よって、次のように指定しても、
"text"、"password"、"textarea"のみにInput Tipsが有効になり、また、textAttr属性の値がない場合は何も表示しないので便利です。$(function(){ $("input, textarea").inputTips(); });
- Tipsの要素の文字サイズは、
0.9emぐらいがいいみたいです。 -
input,textarea要素に対して、次のようにCSSを指定すると幸せになれます。input, textarea { font-size: 1em; }
- Newer: WM3500Rのキャリングケースはどれがよいか
- Older: WM3500Rがやっとこさおいでなすった
ikemasa
ikemasa