hamashun 先生のJS習作：フォームにフォーカスしたらデフォルトテキストを消すというのを見て便乗エントリ。

個人的にやりたかったのは以下の3つ。

• できれば placeholder 属性を使いたい。そうすれば Javascript オフ時でも大丈夫だし、Webkit系ブラウザならほぼ同じ状態になる。
• できれば input だけじゃなく textarea にも使いたい。
• value に入れてしまうと実際のフォームの送信時にその value が送信されてしまうので、placeholder と同じならその value は消したい。

ということでこんな感じになりました。ブログのコメント欄をイメージしています。尚、自分も jQuery を使用しています。

ツッコミなどなどお待ちしております。

「jQuery で placeholder をやってみる」のサンプルを見る

$(function () {

	var conf = {
		focusClass : 'focus',
		blurClass : 'blur'
	}

	$('input[placeholder], textarea[placeholder]').each(function(){
		var placeholder = $(this).attr('placeholder');
		$(this).val(placeholder).addClass(conf.blurClass)
			.focus(function() {
				if ( $(this).val() == placeholder ) {
					$(this)
						.val('')
						.removeClass(conf.blurClass)
						.addClass(conf.focusClass);
				}
			})
			.blur(function() {
				if ( $(this).val() == '' ) {
					$(this)
						.val(placeholder)
						.removeClass(conf.focusClass)
						.addClass(conf.blurClass);
				} else {
					$(this).removeClass(conf.focusClass);
				}
			}
		);
	});

	$('form').submit(function(){
		var input = $(this).find('input[placeholder], textarea[placeholder]');
		$(input).each(function(){
			if ( $(this).val() == $(this).attr('placeholder') ) {
				$(this)
					.val('')
					.removeClass(conf.blurClass)
					.removeAttr('placeholder');
			}
		});
	});

});

やってみた感想

• if 文使うと1,2回は「あれ？今どっちの状態だっけ？」となるのをなんとかしたい。
• .removeClass と .addClass 使い過ぎかもしれない。
• 早く全部のブラウザで placeholder 属性が使えればいいのにね。
• というか今の Webkit 系でも placeholder 属性で表示されたテキストの色は変更できないんだよなぁ。なんとかならんかなぁ。

なんだかだんだん本筋とずれて来たのでこの辺で。

CSS + jQuery Webデザインテクニック

posted with amazlet at 09.11.07

葛西 秋雄
ビー・エヌ・エヌ新社
売り上げランキング: 33950

Amazon.co.jp で詳細を見る

jQuery+JavaScript実践リファレンス―Webデザインを強化するための

posted with amazlet at 09.11.07

葛西 秋雄
ソシム
売り上げランキング: 5636

おすすめ度の平均:

jQueryのユーザインタフェース部品のサンプル集
Ajax完全マスターできました
すぐに使える便利さ
字が大きすぎて、情報の密度が低い気がします

Amazon.co.jp で詳細を見る

標準DOMスクリプティング JavaScript＋DOMによるWebアプリデザインの基礎

posted with amazlet at 09.11.07

羽田野 太巳
ソフトバンククリエイティブ
売り上げランキング: 24893

おすすめ度の平均:

必要かつ最少限の記述。美しすぎる良書
DOMを扱う人のバイブル
実直なDOMの教科書
最近のHTMLに再入門する人にお勧め

Amazon.co.jp で詳細を見る

WebクリエイティブのためのDOM Scripting （Web Designing Books）

posted with amazlet at 09.11.07

中村享介
毎日コミュニケーションズ
売り上げランキング: 29074

おすすめ度の平均:

分かりそうで分からない・・・。
後半難しい
JavaScriptのためにも理想的な(X)HTML+CSSを
入り口に
わかりやすさと簡潔さを両立した好著！

Amazon.co.jp で詳細を見る