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


新管理画面に対応した 投稿ブックマークレット ジェネレータ(β版)を作ってみました

スクリーンショット:新管理画面に対応した 投稿ブックマークレット ジェネレータ(β版)

Blogger Alliance お知らせブログ : コメント編集機能と投稿ブックマークレットを実装しました

■投稿ブックマークレット
下の「ブログ投稿」のリンクを右クリック、またはマウスでドラッグしてブラウザのお気に入り(ブックマーク)に追加します。
「これは!」というページにアクセスしているときに、引用したい部分をマウスで選択し、そのままお気に入りから呼び出すと記事投稿画面が表示されます。

ブックマークレットをカスタマイズした : 地方の印刷会社Webディレクターの日記

いまだに旧管理画面での設定だが、この機能は間違いなく、新管理画面に完全移行しても残してほしい機能だ。

ついにBlog新管理画面に投稿ブックマークレットが装備 : Grope in the Dark... - livedoor Blog(ブログ)

細かい部分は自分で修正するだけです。おいおい編集機能も実装されれば良いですかね。

ということで(唐突ですが)新管理画面に対応した 投稿ブックマークレット ジェネレータ(β版)を作ってみましたので公開したいと思います。

Blogger Alliance 投稿ブックマークレット ジェネレータ

できるだけ迷わずに使えるようにしたつもりですが、一応続きに使い方を書いておきます。


ブログデザインをリニューアルしました

ブログデザインをリニューアルしました

もう既に昨日になりますがこのブログのデザインをリニューアルしました。(PC版のみですが)

理由はいくつかあるのですが、まず以前のデザインに飽きていたと言うのがありますw

過去のエントリなども、大体大丈夫だとは思いますが「ここデザイン崩れてるよ!」等ありましたらコメントやメールなどで教えていただけると幸いです。

デザインコンセプト

今回考えたのは以下の4点。

  • デザインは出しゃばりすぎずシンプルに、かつできるだけ上品にする
  • 以前のデザイン以降、新しく追加された機能にできるだけ対応しつつ、それらをさりげなくさせる(仰々しくさせない)
  • ブラウザによって見た目がかわっても良いので、よりエンハンスメントなスタイルにする
  • jQuery を少しだけ覚えたのでそれを使ってゴニョゴニョする

それぞれ簡単に説明すると・・・

デザインは出しゃばりすぎずシンプルに、かつできるだけ上品にする

以前のデザインで気になっていたのは、全体的にブルーが強すぎてそれ以外の物が置きにくかった点です。

そのため今回は全体を薄いグレーでまとめ、それぞれのパーツもあまり濃い色にはしませんでした。

色々薄すぎるかどうか、な部分ももちろんあるのですが個人的にはぎりぎりのライン。そしてそれが薄すぎて見えなくても困らないようには配慮したつもりです。

新しく追加された機能にできるだけ対応しつつ、それらをさりげなくさせる

新しく追加された機能とは

などです。

特にクリップコメントはコメントやトラックバックなどと同じような表示で馴染ませることができたので満足していますw

ブラウザによって見た目がかわっても良いので、よりエンハンスメントなスタイルにする

ある意味メインだったりしますw

CSSサポートが未熟なブラウザでも最低限のスタイルは保ちつつ、より多くのスタイルをサポートしているブラウザでは、よりリッチなスタイルを提供できるようにしてみました。

具体的には border-radiusRGBAbox-shadow などですね。

そのためブラウザによって表示が異なるはずです。

個人的なおすすめは Safari、もしくは Firefox 3.1 Beta です。

ちなみに Google Chrome が Webkit 使ってるくせに CSS のバグがあるのは何とかならないですかね?

jQuery を少しだけ覚えたのでそれを使ってゴニョゴニョする

少しだけゴニョゴニョしてますw まぁ、主にプラグイン使って程度ですけど。

今回使用したプラグインは

とか、そんな感じです。

ブログネタ
ライブドアブログのカスタマイズ に参加中!


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)