prototype.jsでfillinメッセージ

| コメント(0) | トラックバック(0)

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

↓こんなやつ。

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

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('<対象のID>', 'フィルイン表示するメッセージ', 'メッセージの色');

という指定ができます。

サンプル2




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

<script type="text/javascript">
Event.observe(window, 'load', function(){
	new fillin('sample_text', 'ここに入力', '#CCC');
	new fillin('sample_text2', 'こちらも有効', '#CCC');
	new fillin('sample_textarea', 'テキストボックスでもOK', '#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!」という方には、同様の機能の、jQuery用プラグインが↓で公開されてます。

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

トラックバック(0)

トラックバックURL: http://a-h.parfe.jp/mt6/mt-tb.cgi/190

コメントする

このブログ記事について

このページは、AUSGANG SOFTが2007年11月12日 18:26に書いたブログ記事です。

ひとつ前のブログ記事は「Kanasan.jsに行ってきました」です。

次のブログ記事は「ジョジョの奇妙なGreasemonkey」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ