テキストボックスなどの入力フィールドが未入力の場合に、入力内容のヒントなどを表示する、jQueryのプラグイン「jquery.inputtips.js 1.1.0」をリリースしました。
このプラグインは、入力フィールドに表示レイヤーを重ねてTipsを表示する方式ですので、パスワードフィールドでも使用することができ、特殊処理などは考える必要がありません。
今回のリリースでは、テキスト入力時に、削除アイコンが表示できるようになりました。
削除アイコンをクリックすると、入力されたテキストを削除します。
表示例：
ダウンロード
ダウンロード: jquery.inputtips-1.1.0.zip
必要なライブラリ
jQuery 1.4.2+
使い方
jquery.inputtips.js プラグインを読み込みます。
<script type="text/javascript" src="jquery.inputtips-1.1.0.js"></script>
今回追加された削除アイコンを表示するには、deleteIconオプションに、削除アイコンのパスを指定してinputTips()を呼び出します。
※サンプルの削除アイコンを同梱しています。ご自由にお使いください。
$(function(){ $(selector).inputTips({deleteIcon:("delete-icon.png"}); });
1.1.0 で追加されたオプション
| キー | 型 | 初期値 | 説明 |
|---|---|---|---|
| deleteIcon | String | null | 削除アイコンのパスを指定します。 |
| adjustDeleteIconSize | Boolean | true | true を指定すると、削除アイコンがinput要素の高さより大きい場合に、input要素に収まるように自動的に調節します。 input要素の高さより小さい場合は、何もしません。 |
| inputPaddingWidth | String, Integer | “2px” | 削除アイコンと、入力テキストの隙間を指定します。 |
| timerDriven | Boolean | true | タイマーモードで実行します。イベントモードで実行する場合は false を指定します。 イベントモードは多少負荷が低くなりますが、日本語変換中のイベント等に対応できません。 |
| timerInterval | Integer | 30 | タイマーモード実行時の監視間隔です。(milli second) |
その他のオプションについては、README.ja を参照してください。
その他
- [Mac OS X 10.6.8] Firefox 7.0.1, Firefox 8.0, Safari 5.1.1, [iOS 4.3.5, 5.0.1] Safari, [Windows 7] Firefox 8.0, IE 9.0, [Windows XP] IE 7.0, IE 8.0, Opera 11.52 で確認しています。
- 削除アイコンは、IEだと input 要素内に right-padding を設定したときの動作が他のブラウザと違うため、右端までテキストを入力した場合にピコピコします。IEだけ。これはどうしょうもない。もうほんとIEeeee!
ikemasa
ikemasa