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

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

CSS + jQuery Webデザインテクニック
葛西 秋雄
ビー・エヌ・エヌ新社
売り上げランキング: 33950

jQuery+JavaScript実践リファレンス―Webデザインを強化するための
葛西 秋雄
ソシム
売り上げランキング: 5636
おすすめ度の平均: 4.0
4 jQueryのユーザインタフェース部品のサンプル集
5 Ajax完全マスターできました
5 すぐに使える便利さ
2 字が大きすぎて、情報の密度が低い気がします

標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎
羽田野 太巳
ソフトバンククリエイティブ
売り上げランキング: 24893
おすすめ度の平均: 5.0
5 必要かつ最少限の記述。美しすぎる良書
5 DOMを扱う人のバイブル
5 実直なDOMの教科書
5 最近のHTMLに再入門する人にお勧め

WebクリエイティブのためのDOM Scripting (Web Designing Books)
中村享介
毎日コミュニケーションズ
売り上げランキング: 29074
おすすめ度の平均: 4.5
3 分かりそうで分からない・・・。
3 後半難しい
4 JavaScriptのためにも理想的な(X)HTML+CSSを
4 入り口に
5 わかりやすさと簡潔さを両立した好著!

ads by LinkShare

このサイトの最新情報をRSSフィードで購読する
このエントリをソーシャルブックマークに追加する

この記事へのトラックバック

トラックバックURL

  • 宣伝目的のトラックバックは削除させていただくことがあります。

まだトラックバックはありません。トラックバックはこちらから

この記事へのクリップコメント

この記事へのコメント

コメント一覧

  1. cyokodog

    こんにちは
    他の validation 系のプラグインとの併用を考えると、value属性の汚染は避けたいなぁ、ということで absolute で text を重ねる方法で実装してみました

    http://d.hatena.ne.jp/cyokodog/20090907/jQueryExPlaceFolder01

    November 09, 2009 13:51

  2. forestk

    こんにちは

    なるほどなるほど。
    確かに validation 系のプラグインのことを考えるといろいろ複雑ですね・・・

    参考になります!

    November 10, 2009 19:05

コメントする

名前
URL
 
  絵文字
 
 


About Author
trackfeed
feed meter
人気ブログランキング - Forest.Kの徒然日記
track word
あわせて読みたい
あわせて読みたい
解析
Firefox meter Chrome Counter Firefox3 Meter


特集 & 限定アルバム
iTunes Store Top Songs
iTunes Store Top Albums
  •  iTunes Store(Japan)