prototype.jsでfillinメッセージ

フィルインメッセージって？

↓こんなやつ。

ブラウザの検索窓などに使われていて、ちょっと使いやすくなるっぽい効果を与えます。

prototype.jsで簡単にこの効果をつけられるライブラリを作ってみました。

ダウンロード

http://a-h.parfe.jp/einfach/archives/fillin.js

使い方・サンプル

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="fillin.js"></script>

prototype.jsのあとにこのライブラリを読み込んで
以下のように書くと

<input type="text" id="sample_text1">
<script type="text/javascript">
Event.observe(window, 'load', function(){
	new fillin('sample_text1', 'Google', '#999');
});
</script>

↑こうなります。

fillin('<対象のＩＤ>', 'フィルイン表示するメッセージ', 'メッセージの色');

という指定ができます。

サンプル２

↓のようなコードを書くと↑になります。

<script type="text/javascript">
Event.observe(window, 'load', function(){
	new fillin('sample_text', 'ここに入力', '#CCC');
	new fillin('sample_text2', 'こちらも有効', '#CCC');
	new fillin('sample_textarea', 'テキストボックスでもＯＫ', '#999');
});
</script>

サンプル3

フィルインメッセージを表示させた個所に入力がされていないと、
フォームを送信できなくなる機能もつけておきました。

<form method="get" action="/" id="sample_form">
<input type="text" id="sample_text5">
<input type="submit">
</form>
<script type="text/javascript">
Event.observe(window, 'load', function(){
  new fillin('sample_text5', '入力しないと送信できないよ', '#CCC', 'sample_form');
});
</script>

↑のように4番目の引数に、フォームのIDを入れておくだけです。

蛇足

少し改造すれば、Google desktopの検索窓のように背景画像をフィルイン表示するのも可能かも。

「時代はjQuery！」という方には、同様の機能の、ｊQuery用プラグインが↓で公開されてます。

abui.nowa.jp - fillinメッセージギミックを実現するjQueryの拡張プラグイン
http://abui.nowa.jp/entry/8bff791a51