*

検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

公開日: : ノウハウ

ネット上で何かを検索したい時、どこを見ますか?

そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。

たまに見るのが検索窓に薄い文字で予め文字が入っている場合です。

Appleの検索窓

Apple のサイトでは「検索:Apple.com」と何処の検索なのか明示しています。その他によくあるのは検索窓に「キーワードを入力」と書かれているケースがありますね。今回はその方法について焦点を当てます。

検索窓に薄い文字を入れる方法その1

方法は2つほどありますが、まずは javascript を使う方法です。

html

<form>
<input type="text" onfocus="placeholders()" value="キーワードを入力" id="placeholder" />
</form>

サンプル用の簡単なものです。value 属性で予め入れておきたいテキストを書きます。javascript と css 用に ID を指定し、テキストボックスをクリックしてアクティブになったら onfocus 属性が有効になり javascript の関数を動作させています。

css

<style type="text/css">
#placeholder{
	color:#666;	
}
</style>

そのままでは予め入れておくテキストも黒になってしまうので、css で少し文字色を薄くします。

javascript

<script type="text/javascript">
<!--
function placeholders(){
	var obj = document.getElementById("placeholder");
	if(obj.value == 'キーワードを入力'){
		obj.value = "";
		obj.style.color = '#000';
	}
}
-->
</script>

テキストボックスに入っている文字が「キーワードを入力」だったら、テキストボックスの中身を空にして文字色を黒に変更しています。

javascript 非対応のブラウザの為にスクリプトをコメントアウトしています。今どき非対応の物なんてあるのか?と思いましたが、i-mode などフィーチャーフォンがありました。ネット閲覧もスマホが主流になる中、いつまで考慮する必要があるんでしょうかね。

検索窓に薄い文字を入れる方法その2

javascript を使う方法だと色々とごちゃごちゃしてややこしいですが、実はもっと簡単な方法がありました。従来は javascript を使う方法が主流だったのですが、次の方法は最近可能になったものです。

それは html5 です。

html5 で サイトを作って置かなければいけませんが html5 では javascript や css も使うこと無く完結する事ができます。具体的には以下のように書きます。

<input type="text" placeholder="キーワードを入力">

たったこれだけです。たったこれだけなのに最初に挙げた方法より優れています。

  • 予め設定した文字が消えるのはユーザーが文字を入力した時
  • テキストボックスが空になったら予め設定した文字に戻る
  • 文字色の指定をしなくても最初から薄い

html5 ですので IE8 以下など古いブラウザには対応できません。しかし、2014年末に html5 が正式勧告されました。古いブラウザでも html5 に対応できるスクリプトもあるので十分実用性があるものになりました。

以下のスクリプトで IE8 以下にも html5 の要素が使えるようになります。

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

おわりに

予め検索窓に薄い文字を入れておく事は助けになる事もありますが、使い道を誤ると逆に不便になる事もあります。あまり長い文章を入れておくのは不向きで、あくまで補助的な説明に留めておきましょう。

  • Pocket

おすすめトピックス

関連記事

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

迫力のロングチャーシューラーメン!一宮市の「麺日和千秋店」

愛知県一宮市にあるラーメン店「麺日和 千秋店」は他店とは一線を

→もっと見る