web-dev-qa-db-ja.com

Safari iOS 7での複数選択

選択ドロップダウンで複数オプションを使用すると、サファリで奇妙な問題が発生します。オプションを選択して「完了」と言うと、ドロップダウンが「0アイテム」の表示に戻ります。しかし、複数のオプション（複数）を選択すると、最初のオプションを除くすべてが選択されます。この後、すべてのオプションを選択解除すると、最後のオプションが選択されたままになります。

IOS 7.0.3でsafariを使用して デモの場合 を確認します。

<select multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>

私は http://www.thecssninja.com/html/optgroup-ios6 を見てきましたが、それはoptgroupsの使用に関する問題について述べています-これは（複数で使用される場合）現在サファリを完全にクラッシュさせるようです。

htmlselectmobilesafariios7
21
zacropetricopus
    // hack for iPhone 7.0.3 multiselects bug
    if(navigator.userAgent.match(/iPhone/i)) {
        $('select[multiple]').each(function(){
            var select = $(this).on({
                "focusout": function(){
                    var values = select.val() || [];
                    setTimeout(function(){
                        select.val(values.length ? values : ['']).change();
                    }, 1000);
                }
            });
            var firstOption = '<option value="" disabled="disabled"';
            firstOption += (select.val() || []).length > 0 ? '' : ' selected="selected"';
            firstOption += '>&laquo; Select ' + (select.attr('title') || 'Options') + ' &raquo;';
            firstOption += '</option>';
            select.prepend(firstOption);
        });
    }
10
Gromo

単純な追加：

<option disabled></option>

複数選択の最初の要素として。

4
Rodrigo Silva

これは先日リリースされた7.1で部分的に修正されましたが、まだ多くの問題があります。アイテム数は正しくなりましたが...

  • optgroupのタイトルを選択できます（これはできません。選択できる場合は、少なくともグループ全体を選択/選択解除する必要があります。

  • オプションを無効にした場合<option disabled="disabled">Computer 1</option>もちろんそれを選択することもできますが、もちろんそれは完全に間違っています。

一緒にAppleを手に入れよう。

3
user756659

iPhoneのiOS 7.0.3のSafariにある「複数選択」のバグは、Appleのディスカッションフォーラムでも報告されています。例えば。：

https://discussions.Apple.com/message/23745665#23745665

https://discussions.Apple.com/message/23607781#23607781

これを修正する必要があるのはAppleなので、この2つのディスカッションスレッドの投稿ごとに、この問題の解決を容易にするために何ができるかについてのコンセンサスアプローチは次のとおりです。

  • 既存のバグを探し、必要に応じて、AppleのBug Reporterを介して新しいバグを報告します。
  • Appleの開発者フォーラムでこれに関する既存のディスカッショントピックに参加し、これがまだ議論されていない場合は新しいトピックを開いてください。 （上記の両方の議論は、Appleの公開フォーラム、「Using iPhone」エリアで行われたため、必ずしもAppleの開発者サポートスタッフが見たり、対応したりする必要はありません。）
2
AronR

私は不思議なことにjQueryで動作するように修正を考え出したようです。 jQueryの依存関係が必要ない場合は、コードをバニラ化できると思います。

/**
 * iOS mutliple select fix.
 */
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('select[multiple]').each(function() {
        $(this).prepend('<option disabled></option>');
        $(this).append('<optgroup disabled></optgroup>');
    });
}
0
Daniel Dewhurst