jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch…と書かれているのもよく見かける。

ピクチャ 141.png

予め文字を入力してユーザビリティを向上する

 

そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。

テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応している。利用できる場面は多そうだ。

ピクチャ 142.png

テキストエリアにも対応

 

必須の項目に対してデフォルトで必須と入れておいたり、サンプルになる入力内容を予め入れておくことでユーザビリティを高める効果がある。よりユーザにとって分かりやすいサイトを実現するためにも導入を検討されたい。

**執筆時のバージョン

 3.0.3**

 

jquery-watermark - Project Hosting on Google Code

 http://code.google.com/p/jquery-watermark/