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

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

ads by LinkShare


UK 主催の初心者向け Javascript 勉強会が生まれた経緯


Twitter 経由で開催が決定した UK 主催の初心者向け Javascript 勉強会に参加してきました。

今回、会場を貸していただいたのは株式会社ノッキングオンさんです。 はてなにノッキングオンの会議室使いたい! というキーワードもできているようなので興味のある方は参考にしてみてはいかがでしょうか?

株式会社ノッキングオン
106-0044東京都港区
東麻布3-3-1 アイザック東麻布ビル3F
03-5549-2906
と、microformatsで書いて反応を見てみるテスト

で、内容のまとめに関しては書いてるとこれに遅れそうなので、この勉強会が生まれた経緯をまとめておくw
なぜか?
けしかけたのが自分だからです!><

Twitter / forestk: @ukstudio Twitter JS 初心者講習会・・・ボソッ・・・

ということで、今回の Javascript 勉強会が生まれた経緯を抜粋しました。
  1. ukstudio: そういえば、小さな JS でさえオレのところにまわってくるから勉強会しましょうよって言ったら反応わるかったっけか・・・ *Tw*
  2. ukstudio: @forestk やる気ある人には全然教えられる範囲で教えますよwww
  3. forestk: @ukstudio Twitter JS 初心者講習会・・・ボソッ・・・
  4. suniti @ukstudio @forestk 初心者向けなら是非是非 *Tw*
  5. yuzuho: @forestk @ukstudio はい参加!
  6. ukstudio: @forestk @suniti @yuzuho こっちみんなwww *Tw*
  7. retlet: @ukstudio ( ゚д゚ )
  8. forestk: @ukstudio ・・・・ ( ゚д゚ )
  9. komaku: @ukstudio よろしくおねがいしまう>< *Tw*
  10. yuzuho: @ukstudio ( ゚д゚ )
  11. todomaru: @ukstudio ・・・・ ( ゚ д ゚ )
  12. ukstudio: .@ こっち見てる人 ・・・ ( ^ω^ )  本当に初心者向けでいいなら>< *Tw*
  13. forestk: @ukstudio (・∀・)
  14. komaku: @ukstudio 詳細発言が出るまでお外でれない>< *Tw*
  15. ukstudio: もしやるとしたら、 7 月のはじめぐらいがいいなー。つか、参加希望者結構いるの?ww *Tw*
  16. crema: @ukstudio 私も混ざっても良いですか〜?
  17. necoze: @ukstudio 脱初心者したいので参加超希望です!
  18. ukstudio: 予想外に人が多くてびびってる今日この頃。 writeboard 作ったけど pass とかどう伝えたらいいの?w *Tw*
  19. hamashun: @ukstudio アイドルukのデビューイベントと聞いて地獄の淵から飛んできました *Tw*
  20. komaku @ukstudio モバ勉時は普通にPWついったーに流してたきがす………*kztM*
  21. ukstudio: まぁ公開しても大丈夫かな・・・(一応略)
  22. ukstudio: プレッシャーで UK 涙目wwww *Tw*
ということで、無事に初心者向け Javascript 勉強会が開催されましたとさ。
めでたしめでたし

じゃぁ、次回は初心者向け Javascript 勉強会 実践編・・・ですかね?ww>UK

Technorati Tags:


可愛すぎる 踊るアスキーアート

ascii-moviei d e a * i d e aさんで紹介されていた踊るアスキーアート

ascii-movie

どうやって動かしてるの?とか難しいことは分かりませんが、とにかく可愛過ぎです・・・

Technorati Tags: , , ,



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)