web-dev-qa-db-ja.com

iOS 8の複数の<select> iPhoneの深刻なバグ?

IOS 8.0では、AppleがiPhoneのSafariに新しいバグを導入しました。これは、複数の_<select>_要素を使用する場合に非常に深刻だと思います。たとえば、生年月日を選択するためによく使用されます。再現するには:

  1. それぞれに複数の_<select>_がある2つの_<option>_でページを作成します

  2. IPhoneのiOS8のSafariで開きます(バグは8.0.2にまだ存在します)

  3. 最初の_<select>_をタップします

  4. 3番目のオプション、つまり3月を選択します

  5. _<select>_が選択したものに更新されないことに注意してください(iOS 7では更新されます)

  6. 2番目の_<select>_要素をタップします

  7. 次の点に注意してください。

    • 最初の_<select>_は更新されません
    • 2番目の_<select>_は3を示します(これは最初の_<select>_の位置です)
    • 下のピッカーは1を示しています

最初と2番目の_<select>_を交互にタップすることでこれを繰り返すことができ、同じパターンで変化することに注意してください。パターンを知らない限り、これはランダムに表示される場合があります)。あなたが年ピッカーも持っているなら、それはさらに混乱しているように見えます。

モバイルデバイスで試すには、次のjsfiddleを試してください: http://jsfiddle.net/m7baw590/6/embedded/result/

また、onchange="alert(this.value)"は誤った値を報告します(2番目の_<select>_要素で選択されたものと同じです。これはここで確認できます: http://jsfiddle.net/m7baw590/ 7 /埋め込み/結果/

各選択の間に[完了]をクリックするか、矢印を使用して切り替えると、これらのバグは発生しません。

これに対する回避策はありますか?

27
Niclas

私はこの方法で問題を解決しました:

<select>
    <option></option>
    <option></option>
    <option></option>
    (...)
    <optgroup disabled></optgroup>
</select>

空の<optgroup><select>に追加しました。

7
rdshck

IOS8の選択フィールドに別のバグを発見しました(たとえば、iPhoneでのみ、iPadで問題ないようです)。

http://jsbin.com/kuhogopafe/1

再現方法:

  • 3つのオプションを選択してください
  • 1つのオプションをもう一度選択解除します
  • 結果:2つの選択されたオプションの代わりに、最後に選択されていないオプションのみが選択済みとして報告されます
10
Alex

私がiphoneSafariで見つけた唯一の解決策は、他のすべての選択ボックスをオンフォーカスで無効にし、すべてのオンブラーを再度有効にすることです。これにより、ユーザーはプッシュ完了を強制されます。

0
Andras