ラベル入りのフォーム要素を実装する方法2つ
![](/img/jqueryinfieldlabel.jpg)
最近のフォーム要素にはラベル(透かしテキスト)を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。
XHTML, JavaScript
<input type="text" value="メールアドレス" id="email" onfocus="if (this.value == 'メールアドレス') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレス';}" />
これは使いやすいんですが、ソースが綺麗じゃないのと、これからはよりリッチなインターフェースが求められるので、もう少し自然な動きだといいですよね。
そこで、jQuery In-Field Label Pluginを使えば、フェードイン&アウトするラベル要素を作ることができます。
ソースは以下の通り。
XHTML
<p>
<label for="field_id">Label Text</label><br />
<input type="text" name="field_id" value="" id="field_id">
</p>
CSS
form p { position:relative }
label { position:absolute; top:0; left:0}
Javascript
$(document).ready(function(){
$("label").inFieldLabels();
});
ダウンロードは以下のページの「Download Source」から。
In-Field-Labels-jQuery-Plugin
ぜひ見てみてください。
A Better jQuery In-Field Label Plugin
金曜日ですね〜。晴れてたし仕事も進んでいい感じだ。
2月28日(日)に、ロクナナのイベント「WordPress x ロクナナワークショップ 実験!WordPressラボラトリー」が開催されます。
出演者がすごいので、WordPressユーザの方、WordPressに興味のある方は、ぜひ参加してみてはいかがでしょうか?
WordPress x ロクナナワークショップ 実験!WordPressラボラトリー