4

iOS ブラウザー (chrome および safari) の複数選択リストに問題があります。私の場合、選択に焦点を当てるとすぐにウォッチャーを起動し、モデル値を更新する選択に角度のあるモデルバインディングがあります。これは iOS 9.2 のバグだと思います。具体的な症状は次のとおりです。

クロム：

select 要素がフォーカスされるとすぐに、"change" イベントが発生し、UI に選択項目が表示されていなくても、値が最初の項目に設定されます。リストから別のオプションを選択して iOS オーバーレイを閉じると、値が正しい値に変わります。その後、もう一度フォーカスすると、「変更」イベントが再び発生し、最初のオプションの値が再び追加されます。今度はオーバーレイを閉じると、最初の項目が選択されたままになります。

サファリ：

select 要素がフォーカスされるとすぐに「change」イベントが発生し、値が最初の項目に設定されます。この場合、オーバーレイの UI には選択が表示されませんが、元の選択のテキストには、最初の項目が選択されているように表示されます。実際に初めて選択すると、最初の項目を選択したことが UI に明確に示されていても、値が null に設定されます。選択に焦点を合わせてぼかすと、リストの最初のオプションの値を含めるかどうかを切り替え続けます。基本的に、フォーカスされた値に最初の項目が誤って追加されることに加えて、このブラウザは値と UI の間の同期も失います。

この動作を示すために、非常に単純化された jsfiddle を作成しました。

http://jsfiddle.net/u922mnvv/4/

HTML

<select name="test" multiple>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
  <option value="test4">test4</option>
  <option value="test5">test5</option>
  <option value="test6">test6</option>
</select>
<div>
  Log:
</div>

JS (イベントと値を記録するためだけに)

$('select').change(function(event){
    $('div').append('<p>change:'+$('select').val()+'</p>');
});

これは既知の問題ですか? 回避策はありますか?

4

2 に答える 2

3

同じ問題がありました。この答えはそれを解決するのに役立ちました:

トリックは、空の無効な選択オプションを最初の位置に追加することです。

<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 が最初のオプションを自動的に選択するのを防ぎ、選択値を正しくクリーンに保ちます。

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

于 2016-01-28T14:31:24.800 に答える