zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

HTML・CSS

【css3】inputタグに事前に薄く文字を表示させる方法

投稿日:2014年3月6日 更新日:

お問い合わせフォーム等で入力欄に事前に文字が入っているのを見たことありますか?

スクリーンショット 2014-03-06 10.40.10
あれが入っていると相手としては何を入力すればよいのかわかりやすいので、是非導入したい!

HTML5だと実は簡単に導入できます。
inputタグに下記を加えます。

<input type="text" placeholder="入れたい語句" />
こちらで問題なく表示されます。簡単!!
ただIE8以下は対応してくれてないので、jquery.ah-placeholder.jsを事前に読み込んでおいて下記を記載します。
<script type="text/javascript">
$(function() {
  $('[placeholder]').ahPlaceholder({
    placeholderColor : 'silver',
    placeholderAttr : 'placeholder',
    likeApple : true
  });
});
</script>

「[placeholder]」 としてある部分はセレクタなので、使用する環境に合わせて変更しましょう。上記の例の場合は、「placeholder をもつ要素」 という指定の仕方をしています。これは後述する placeholderAttr オプションに placeholder を指定している関係上、そうするのが一番楽だから。

placeholderColor : [プレースホルダ テキストの文字色 (初期値 : silver)]
likeApple : [Mac っぽい挙動に (初期値 : false)]
上記の 2つは初期値のままでも問題ないので特に書かなくても大丈夫。なお、likeApple オプションを 「true」 にすると、Mac 版 Safari のようにフォーカス時点ではプレースホルダが消えず、入力をはじめると消えるという挙動になります。

大事なのは placeholderAttr オプション。

placeholderAttr : [プレースホルダに使用する属性 (初期値 : title)]
ここの値を 「placeholder」 にすることで、placeholder 属性の値を使用して ah-placeholder.js が動作し、さらに placeholder 属性に対応している環境では処理が自動的に中断されます。

参考・引用:placeholder 属性と jQuery で IE にもプレースホルダを

これでIE8以下もOKです!

CSSで色を変えたり位置を調整することも可能です。

/*各ブラウザ用に2行*/
input::-webkit-input-placeholder {padding-left: 5px;}
input:-moz-placeholder {padding-left: 5px;}

簡単に導入できました!!

zakey336x280

zakey336x280

-HTML・CSS
-, , ,

関連記事

HTML5rawkes

【html5】<video>タグによる動画の再生サンプル

html5から<video>タグを使用して動画を簡単に再生させることができます。 IE8以下には対応していないので、Javascriptを読み込まして対応させる必要があります。 基本の書き …

CSS3

【css3】文字やボックスに影を付ける方法

css3を使えば文字やボックスに影を簡単に付けることができます。 通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。 …

【html】ガラケー用のHTMLテンプレート

【html】ガラケー用のHTMLテンプレート

ガラケーのHTMLを作ることがあるので、テンプレートをおいておきます。 これでHTMLを作って文字コードをShift_JISで作ればとりあえずの形はできます。 <?xml version=&qu …

Sublime Textのautofilenameのwidthとheightが入らない。

Sublime Textのautofilenameのwidthとheightが入らない。

軽くて拡張しやすいので愛用しているSublime Textですが、先日からなぜかautofilenameのwidthとheightが入らない。 Sublime Textを使っている一番の理由がauto …

CSS3

【CSS】URLや単語を途中で改行させる方法

長いURL等を貼り付けているとその単語分の幅がないと折り返してしまってうまく改行してくれません。 そんな場合はcssで対応しました。 対応したい要素に対して下記1行で対応できます。 word-brea …