to topto bottom

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

検証の現場から:Androidブラウザのテキスト入力履歴が空白に

はじめに

検証サービスチームのウジハラです。
新たに「検証の現場から」シリーズとして、当社の実機検証サービス(アウトソース)で判明した問題事例をご紹介していきたいと考えております。
今回は、Androidブラウザのテキスト入力履歴に関する事例です。

正常表示例

  1. Androidブウラザでsize="3"のテキストボックスを表示する
  2. ブラウザ内の横幅を180px程度に調節(ピンチインorアウト)する
  3. テキストボックスに"123"と入力してデータを送信する
  4. 同じページを再訪問し、テキストボックスに"1"と入力する
  5. テキストボックスの下部に"123"という入力履歴が表示される
SH-01F(Android 4.2)のAndroidブラウザでのスクリーンショット180_size_3

異常表示例1(テキストボックスの幅が狭い場合)

  1. Androidブウラザでsize="2"のテキストボックスを表示する
  2. ブラウザ内の横幅を正常表示例と同様に180px程度に調節する
  3. テキストボックスに"12"と入力してデータを送信する
  4. 同じページを再訪問し、テキストボックスに"1"と入力する
  5. テキストボックスの下部に"12"ではなく、空白の入力履歴が表示される(空白部を選択すればテキストボックス内に"12"が反映される)
SH-01F(Android 4.2)のAndroidブラウザでのスクリーンショット180_size_2

異常表示例2(ブラウザを縮小表示した場合)

  1. Androidブラウザで「正常表示例」と同じsize="3"のテキストボックスを表示する
  2. ブラウザ内の横幅を240px程度に調節する(正常表示例よりも縮小表示させる)
  3. テキストボックスに"123"と入力してデータを送信
  4. 同じページを再訪問し、テキストボックスに"1"と入力する
  5. テキストボックスの下部に"123"ではなく、空白の入力履歴が表示される(空白部を選択すればテキストボックス内に"123"が反映される)
SH-01F(Android 4.2)のAndroidブラウザでのスクリーンショット240_size_3

異常表示が発生する機種・ブラウザ

  • Android 4.0/4.1/4.2から数機種ずつを抽出して確認した限りでは、上記の異常表示はAndroid 4.0以上に搭載のAndroidブラウザ(標準ブラウザ)に共通して発生することが判明しています。(全機種の動作は未確認です)
  • Android 4.0以上であっても、Chromeブラウザでは発生しません。(テキストボックスの幅が狭くても、ブラウザを縮小表示しても発生しません)
SH-01F(Android 4.2)のChromeブラウザでのスクリーンショットchrome_size_2
  • Android 2.3以下のAndroidブラウザでは、入力履歴が空白になりませんが、文字が欠けるケースがあります。Androidブラウザは、テキストの入力履歴に関して何らかの問題を抱えたままバージョンアップしているとも言えます。
SO-03C(Android 2.3)のAndroidブラウザでのスクリーンショットandroid2_3

回避策

「異常表示例1」であれば、テキストボックスの幅をsize="2"から"3"に広げ、maxlength="2"を指定しておけば、履歴が空白にならず、かつ2文字の入力制限を共存させることが可能です。

SH-01F(Android 4.2)のAndroidブラウザでのスクリーンショット180_size_3_max_2

上記回避例でもブラウザの表示倍率を縮小すれば異常表示は発生します。100%回避できるわけではありませんが、参考になれば幸いです。

端末側原因のインシデントが増加傾向

従来型のケータイからスマートフォンに主流が移ってから、上記事例のように端末側が原因と推測されるインシデントの検出が増えております。
端末側が原因の不具合では、Webやアプリ側では対応不可となるケースもありますが、今回ご紹介の異常表示が発生する可能性を把握しておくだけでも、実機検証の価値があるのではないでしょうか。
スマートフォンサイトやアプリの実機動作検証(互換性確認検証)のアウトソースにご興味のある方は、お気軽に当社までお問い合わせください。

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