to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

スマートフォンでのHTMLフォームプレースホルダ表示は、機種によってかなり挙動が異なる

placeholderを使用した例(GREEのログイン画面)
placeholderの例
こんにちは。x-fit開発チームの山本です。
 
HTML5では、フォームにいくつかの新しい属性が追加されています。iOSやAndroidなどのスマートフォンやタブレットは、HTML5をサポートしていますが、実はバージョンによって挙動が異なる場合があります。
今回ご紹介するのは、placeholder属性に対する挙動についてです。placeholder属性は、text,password属性を持つinputタグやtextareaタグに対して設定し、テキストボックスやテキストエリアが未入力の場合に、何を入力すべきかの説明や、入力する文字列のサンプルなどを例示しておくために使用します。
 
 

【HTMLコード】

下記のようなコード(抜粋)を使って、OSやバージョンによって、placeholderのテキストがどのように表示されるかどうかを確認してみます。
 
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>place holder</title>

<div>
<label>メールアドレス<input id="mail" style="width: 300px;" type="text" placeholder="someone@sample.com"></label>
</div>
<div>
<label>パスワード<input id="pw" style="width: 300px;" type="password" placeholder="At least 6 characters"></label>
</div>
<div>
<label>メモ<textarea id="textarea" style="width: 300px;" placeholder="プレースホルダに改行は使えません"></textarea></label>
</div>
 

【確認結果】

各バージョンで確認してみたところ、以下のようになりました。
 
機種 OS・Version テキストボックス テキストボックス(パスワード) テキストエリア
iPhone 4 iOS 4.0
iPhone 4S iOS 5.0 ○※1 ○※1 ○※1
Xperia Android_1.6 ○※2 ○※2 ×
IS04 Android_2.1 ○※2 ○※2 ×
IS03 Android_2.2 ○※3 ○※3
Xperia arc Android_2.3 ○※3
GALAXY NEXUS Android_4.0 ○※3 ○※3
IS12T Windows Phone 7 × × ×
 

×:

プレースホルダは表示されない。

○:

プレースホルダが表示される。フォーカスが当たると、プレースホルダは消える。

フォーカスが当たると、プレースホルダは消える
 

※1:

プレースホルダが表示される。プレースホルダテキストは、フォーカスが当たっても消えない。文字を入力(空文字でなくなった)時にプレースホルダテキストが消える。

文字を入力時にプレースホルダテキストが消える
 

※2:

プレースホルダが表示される。フォーカスを当てると、プレースホルダテキストが入力された状態になってしまう。文字を入力するためには、プレースホルダテキストを手動で消す操作が必要になる。フォーカスの当てる順序によっては、プレースホルダが消える場合もあり、挙動が不安定。

プレースホルダテキストが入力された状態になってしまう
 

※3:

プレースホルダが表示される。フォーカスを当てると、labelタグの内容(上記例の「メールアドレス」「パスワード」に相当する文字列)が表示される。文字を入力(空文字でなくなった)時に表示されているテキストは消える。

フォーカスを当てると、labelタグの内容が表示される
 

【対応】

まず、ブラウザがplaceholder属性に対応しているかどうかによって表示を変える必要があります。

対応していない場合

WindowsPhoneのIEや、Android2.1以前のtextareaタグはplaceholder属性に対応していません。そのため、入力値の説明をplaceholder属性のみで記述してしまうと、対応していない機種では、それが何を示しているのか全く分からなくなってしまいます。Javascriptを使って、属性に対応しているかどうかを判断し、プレースホルダの内容を追加表示したり、CSSを使ってテキストボックスに重ねて表示するようにしましょう。

対応している場合

対応している場合でも、上記のように挙動が様々です。いまのところ、フォーカスが当たった時点でプレースホルダテキストが消える(または置き換わる)挙動が多い状態ですので、「半角英数」や「カタカナ」というような入力規則をplaceholder属性のみに記載するのは、避けた方がよいでしょう。フォーカスを当てると表示されなくなってしまい、書式がわからなくなってしまいます。labelタグなど、placeholder以外のものも使って、ユーザが迷わないようにメッセージを表示するようにしましょう。
 
 
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。
 

 

タグ: 
このエントリーをはてなブックマークに追加