web-dev-qa-db-ja.com

モバイルSafariの複数選択のバグ

現在の（iOS 9.2）モバイルサファリで本当に迷惑なバグを見つけた場合（iOS 7から初めて登場！）

モバイルサファリで複数選択フィールドを使用する場合-このように：

<select multiple>
    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

自動的に選択すると問題が発生します！

iOSは、選択を開いた後（ユーザーの操作なしで）最初のオプションを自動的に選択しますが、青色の選択「チェック」では表示されません。

したがって、2番目のオプションを選択すると、2つのオプションが選択されていることがわかります（ただし、選択されているのは1つだけを強調表示します）。

ここでもう一度選択を閉じて再度開くと、iOSは最初の値の選択を自動的に解除します。繰り返すと、ユーザーの操作なしで再び選択されます。

これは非常に迷惑なシステムバグであり、ユーザーエクスペリエンスを破壊しています。

htmliosselectmobile-safarimulti-select
25
Laurenz Glück

サファリの複数選択バグと空および無効オプションのティック関連の問題の解決策：

<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

実際のオプションの前に、無効化された非表示のoptgroupを追加します。

24
Tejal Raval

長い調査の結果、次の（最も美しいとは言えませんが）実用的なソリューションが見つかりました。

コツは、最初の位置に空で無効オプションを追加することです：

<select multiple>
    <option disabled></option>

    <option value="test1">Test 1</option>
    <option value="test2">Test 2</option>
    <option value="test3">Test 3</option>
</select>

これにより、iOSが最初のオプションを自動的に選択することを防ぎ、選択値を正しく維持します！

空のオプションは表示されず、選択の数は正しいです。

14
Laurenz Glück