2017-04-17 更新

Android5系のタブレットではselectコントロールが使えない

主題の通り、Android5系のタブレット(正確に使えないのは、選択項目の一覧がPCと同じように表示されるデバイス)ではHTMLのselectコントロールが使えません。

以下のコードを設定しても、画面上には空で表示されてしまいます。


<select>
    <option value="1">項目1</option>
    <option value="2">項目2</option>
    <option value="3">項目3</option>
    <option value="4">項目4</option>
    <option value="5">項目5</option>
</select>

本来表示されている箇所をタップすれば選択は可能なので、表示だけができないようです。

解決方法

原因はAndroidに搭載されたWebViewのバグのようですが、なにかしら解決策があるはず。そう思って調べましたが、AngularJS単体ではそれらしい記事はどこにも見当たりませんでした。

あったのはjQueryを利用したもの。data-native-menuを利用すれば大丈夫なようですが、それだけのためにjQueryは使いたくありません。

selectを利用しないUI設計にするか、ディレクティブを利用してselectに似せた独自のUIを生成。もしくは、Android5系を搭載したタブレット端末をインストール対象から除外(Playストアにて設定)するしかなさそうです。

参考リンク

Cordova】関連記事