placeholder

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 属性で表示されたテキストの色は変更できないんだよなぁ。なんとかならんかなぁ。

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