テキストフィールドにplaceholder属性を記述すると、何も入力されていない時に「例)exsample」というような文字が薄く表示されることはもう周知のことだと思います。
スマホでこれを実装しました。
ところが、この位置がiPhoneとAndroidで上下の位置が異なるのです。
同業者であれば「ブラウザの仕様」で伝わるのですが、ある客がこれについて「気になるので位置を合わせてくれ」という無茶な要望が。
めんどくさいので、ブラウザとOSの仕様でこうなっている、と説明したものの、この辺は自分も気になっていたところなので、できるかどうかは分からないが調べて調整してみる、しかしどうやってもできない場合もあるからそれは了承してほしい、と案内して調査に入った。
というわけで、数多くの難題をクリアしてきた相棒、Mr.Google(ただのGoogle)を使って調べてみた。
やはり世界は広い。同じようなことが気になる人がいるもので、対策方法が出てきた。
テキストフィールドをpaddingで調整する、とか、line-heightでの調整、とか。
その辺、試してみたものの、やはりデフォルトで行間の概念が異なるため、どれも完全に解決されるものではなかった。placeholderの位置が解決したかと思うと、入力するテキスト位置がずれてしまった。
完全に壁にぶち当たったー、とか思いながらも、更にキーワードを変えて検索。
すると、placeholderに対するCSSがあることが発覚。
「これは解決するぞ!」と思い、早速記述。
ex.
input::-webkit-input-placeholder{ ○○:●●; }
しかしコイツにline-heightをセットすると、なぜかAndroidが反応しない!
「なんだよ!期待させやがって!」
と舌打ちするオレ。
しかし、iPhoneにはきいたので、何とかなるような気がして、色々と数値を変えたり組み合わせたりと試してみた。
経緯を全部書くとかなり長くなるので、結果のみをいうと、解決!ザ・解決!
その方法をここに記述。
同じようなことで困っている人!ここに辿り着いたのはラッキーでしたな!
もうすぐ解決しますよ!
手順説明の前に、これはフォントサイズを14pxに指定した場合の記述です。
それ以外の場合は、数値を変える必要があると思うので、それは自分で算出してください。変更部分は記述しますので。
それでは、順を追って説明します。
- テキストフィールドに「height」で縦幅をセット。
ここの数値はたぶんいくつでもOK。オレの場合は20px。 - テキストフィールドに「padding」をセット。
コレは必須ではない気がする。テキストフィールドのborderを0にしている場合、外枠を別の要素で作っていたりするので、その辺との調整だと思います。
オレの場合はまさにそれで、外枠の縦幅が36pxだったので、テキストフィールドの縦20pxを引いた16pxを2で割って上下8pxをセットしました。 - 「-webkit-input-placeholder」をセット。
書き方は、「input::-webkit-input-placeholder{スタイルの内容}」というように、最初の「input」の後にコロンを2つ書く事。コロンを1つ書いただけだときかない。
そして、ここにセットするスタイルは、「line-height:1.286;」
これは、フォントサイズが14pxの時、恐らく行間(もしかしたら1行だけかも)の値がiPhoneとAndroidで一番近くなる数値。
フォントサイズが14pxでない場合はこの数値が1.286ではないと思うので、各サイズに合わせて数値を変更する必要があると思います。
この数値でiPhone側のplaceholderの上下位置をAndroidに合わせる。
以上でフォントサイズ14pxの場合のplaceholder上下位置が中央にセットされ、テキストフィールドに入力した文字も中央に配置されるようになったと思います。
ポイントは、「テキストフィールドの縦幅のセット」と「placeholderの位置をAndroidに寄せる」ことだと思います。
テキストフィールドの縦幅を合わせないとどうなるかというと、入力する文字の下にできるデフォルトでセットされている隙間が邪魔をして、iPhoneとAndroidでのテキストフィールドの縦幅が合わなくなってしまいます。そのため、placeholderの位置や入力した文字の位置が合いません。
そして、placeholderの位置が「-webkit-input-placeholder」でセットできるので、それを入力文字の位置と合わせること。
入力文字の上下位置はiPhoneとAndroidは合うのですが、placeholderの配置はiPhoneの場合、なぜかデフォルトでbaselineではなく、テキストフィールドの底辺に配置されてしまうのです。そして、ここではpaddingがきかないため、line-heightで行間調整することで縦位置をずらす必要があるのです。
今回はAndroidに-webkit-input-placeholderがきかないことで1.286という行間数値で調整できましたが、Androidにもきくようになった場合はこれも再調整する必要があると思います。
今回の検証端末はiPhone6、iOS9.2.1とXPERIA SO-04E、Android4.2.2でした。
Android側がちょっと古めなので、もしかしたら最新のAndroidではまた違った結果が出るかもしれませんね。
※2016/03/07補足
iPhoneもAndroidもどちらもデフォルトブラウザの場合です。
別ブラウザでの検証はしていません。