*

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

公開日: : ノウハウ

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

そう、検索窓ですよね。検索窓は 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

おすすめトピックス

関連記事

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

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

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

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
誰でも簡単に猫のイラストから写真のような猫ができる猫ツールが凄かった

猫は小学生の頃から好きでよく猫のイラストもノートに落書きしたり

ぽてコタン
玉ねぎとじゃがいもの旨味が凝縮されたのカルビー「ぽてコタン」が美味い【北海道限定】

北海道土産として人気で名高いものの一つにカルビーの「じゃがポッ

FOR HONOR(フォーオナー)PC版をGeforce GTX960でプレイした感想

侍が登場するゲームが出ると聞いて大変興味が沸いたゲームがありま

チキンガンボ
札幌でアメリカン料理が楽しめるダイニングバー「BUDDY BUDDY(バディバディ)」でディナー

札幌には和食、イタリアン、パンケーキ、様々な飲食店がありますが

ピクルス
ピクルスとは何か?実はきゅうりを指す言葉ではなかった

ピクルスと聞いて何を思い浮かべるでしょうか?日本でも一般的な食

→もっと見る