はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

input に onfocus で背景色や文字を消す

2007/07/09 Mon [Edit]

検索窓やテキスト入力フォームなどの input 要素に使えるデザインの小技です。簡単な JavaScript で実装できるので皆さんも挑戦してみてはいかがでしょうか?
まずは下のサンプルをご覧ください。


カーソルを上の「サンプル検索窓」と表示されたテキストボックスに合わせクリックしてみてください。

どうでしょう?
検索窓にテキスト(文字)を入力可能な状態にすると「サンプル検索窓」と表示されていたテキストが消え、背景色が薄いグレイから白に変わったのが分かりましたか?また、選択状態を解除(他の部分をクリックで解除できます)で初期状態に戻ります。

なかなか地味な小技ですが、本当のお洒落とは地味なところで差がつくと誰かがどこかで言っていたような気がします・・・。
それはともかく、お洒落とは関係なく使い道によってはユーザビリティ(使いやすさ)も多少アップするのでは?なんて考えから、今回ご紹介させて頂くことにしました。

実はこの小技は JavaScriptonfocusonblurinput 要素に適用して実現しています。

それでは早速、下のサンプルのソースをご覧ください。

<input type="text" class="hajime_search" onfocus="if (this.value == 'サンプル検索窓') this.value = ''; this.style.background = '#fff';" onblur="if (this.value == '') this.value = 'サンプル検索窓'; this.style.background = '#f1f1f1';" value="サンプル検索窓" />

少し見辛いと思いますが、上のソースのい部分が必要なソースです。ソースについて簡単に説明すると onfocus とはイベントハンドラ(event handler)の1つです。イベントハンドラとは JavaScript で記述された特定の処理を、ユーザーのマウス操作や特定の条件が発生した時に実行させる為の記述で HTML のタグに記述できる特殊な属性です。

つまり onfocus とはマウスカーソルの焦点(ピント)が合っている時に特定の処理を与える為のイベントハンドラで、今回使用しているもう1つのイベントハンドラ onblur はその onfocus が外れた時に特定の処理を与える為のイベントハンドラです。

JavaScript の込み入った話しは今回は割愛させて頂くとして input 要素の value 属性(初期値)にセットした言葉「サンプル検索窓」を onfocusonblur によって表示・非表示を切り替えています。

また、背景色も CSS で初期カラーを指定しておき、テキストの時と同じように onfocusonblur で切り替えています。

実は背景色だけなら CSS の疑似クラスの1つ focus でも実現可能なのですが IE6 と IE7 共に未対応なので今のところ JavaScript での実装が有効な手段だと思います。

onfocus="if (this.value == 'テキスト') this.value = ''; this.style.background = 'フォーカス時のカラー';" onblur="if (this.value == '') this.value = 'テキスト'; this.style.background = '初期カラー';" value="テキスト"

上のソースを input タグの中にコピー&ペーストし、「テキスト」部分には3箇所同じ語句を入れ、「フォーカス時のカラー」と「初期カラー」に RGB などで色を指定することで、サンプルと同じようなテキストボックスが出来るので興味のある方はお試しください。

まだ試していないのではっきりとは言えませんが、同じ方法で input 要素の背景に画像なんかも表示させられそうですね。今度試してみます。

※サンプル検索窓の背景色の初期カラーやテキストカラー・サイズなどは外部 CSS で指定し input タグ内の class 属性で適用しています。

追記
イベントハンドラは今回紹介しただけではありませんし input 要素以外にも記述できます。色々試してみると楽しいかも知れませんよ。また機会があったらご紹介したいと思います。取り敢えず次のエントリでイベントハンドラの一覧表を掲載しておきます。

Prev
イベントハンドラ一覧表
Top
はじめてのブログデザイン
Next
祝!オレンジの FC2 ブログテンプレート完成!

Comments

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。