input内のテキスト表示しfocusするjQueryプラグイン

input内のテキスト表示しfocusするjQueryプラグイン

フォームに使う際、input内にうっすらとテキストを表示し、focusした際にボーダーの色を変更してくれるjQueryのプラグインです。

demo page

…ここからが続き

ダウンロード・使い方

ダウンロード元「jQuery Inline Form Labels

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[title]').each(function() {
		if($(this).val() === '') {
			$(this).val($(this).attr('title'));	
		}
		
		$(this).focus(function() {
			if($(this).val() == $(this).attr('title')) {
				$(this).val('').addClass('focused');	
			}
		});
		$(this).blur(function() {
			if($(this).val() === '') {
				$(this).val($(this).attr('title')).removeClass('focused');	
			}
		});
	});
});
</script>

XHTML

<p><input type="text" title="Email Address" value="" /></p>
<p><input type="text" name="" id="" title="First Name" value="" /></p>
<p><input type="text" name="" id="" value="" /></p>

title に表示したいテキストを記述して下さい。

CSS

input { 
	border: 1px solid #CCC;
	color: #999;
	font: inherit;
	padding: 4px;
	width: 230px;
}

focus 前のボーダーの色やテキストの色を指定。

input:focus, input.focused 
{ border-color: #333; color: #333; }

focus 後のボーダーの色やテキストの色を指定。

demo page

Comments

MIYA

MIYA

tokoさん

自分はまだ検索ボックスでしか使った事がなかったので、そのようになると知りませんでした;;

それといろいろ試してはみたのですが自分では対処法は分かりませんでした…
お力になれなくてすみません。

2009年07月14日 23:32

toko

toko

これ便利ですね^^試しに入れてみたところうまくできたのですがフォームでPOSTすると何も入力しない場合titleで指定した値が送られてしまいます^^;
これってなんとかならないものでしょうか?

2009年07月13日 01:29

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article