iOS 9.2：选择列表（多个）不正确地触发更改事件，并将焦点设置为第一个选项。 （safari和chrome） [英] iOS 9.2: Select List (multiple) incorrectly firing change event and setting value to first option on focus. (safari and chrome)

问题描述

我在iOS浏览器（chrome和safari）中有多个选择列表的问题。在我的情况下，我有一个角度模型绑定在选择，它是射击观察者，并更新模型值，一旦我专注于选择。我相信这是iOS 9.2中的一个错误。以下是具体的症状：

Chrome：

只要选择元素集中在更改事件被触发，并且该值被设置为第一个项目，即使UI没有显示任何选择。从列表中选择不同的选项并关闭iOS覆盖后，值将更改为正确的值。如果您再次专注于更改事件，则再次触发，并再次添加第一个选项的值。这次关闭叠加层留下选择的第一个项目。

Safari：

一旦选择元素重点关注更改事件触发，并将值设置为第一项。在这种情况下，叠加层中的UI显示没有选择，但原始选择中的文本现在会显示选定的第一个项目。实际上选择第一次，即使UI清楚地显示您已经选择了第一个项目，将值设置为null。当您对焦并模糊选择时，它将继续切换列表中第一个选项的值。基本上除了第一个项目不正确地添加到焦点值之外，这个浏览器也会在值和UI之间失去同步。

我创建了一个非常简化jsfiddle来演示这种行为。

http：// jsfiddle.net/u922mnvv/4/

HTML

 < select name =testmultiple> 
< 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> 
日志：
< / div> 
  

JS（仅用于记录事件和值）

$ pre $ $（'select'）。change（function（event）{
$（'div'）。append（'< p> change：'+ $ （'select'）。val（）+'< / p>'）;
}）;


这是一个已知问题吗？有没有任何工作？

解决方案

我有同样的问题。此答案有助于解决此问题：

诀窍是在第一个位置添加一个空且禁用的选项：

 < select multiple> 
< option disabled>< / option> 
 
< option value =test1>测试1< / option> 
< option value =test2>测试2< / option> 
< option value =test3>测试3< / option> 
< / select> 
  

这将阻止iOS自动选择第一个选项，并保持选择值正确且干净！ p>

空选项不可见，选择次数正确。

I am having issues with a multi select list in iOS browsers (chrome and safari). In my case I have an angular model binding on the select which is firing watchers and updating the model value as soon as I focus on the select. I believe this is a bug in iOS 9.2. Here are the specific symptoms:

Chrome:

As soon as the select element is focused the "change" event is fired and the value is set to the first item, even though the UI shows no selections. After selecting a different option from the list and closing the iOS overlay, the value changes to the correct value. If you then focus on it again the "change" event is again fired and the value of the first option is again added. This time closing the overlay leaves the first item selected.

Safari:

As soon as the select element is focused the "change" event is fired and the value is set to the first item. In this case the UI in the overlay shows no selections, but the text in the original select now shows the first item as selected. Actually selecting the first time, sets the value to null even though the UI clearly shows you have now selected the first item. As you focus and blur the select it will continue to toggle the inclusion of the value of the first option in the list. Basically in addition to the incorrect addition of the first item to the value on focus, this browser also loses sync between the value and the UI.

I've created a very simplified jsfiddle to demonstrate this behavior.

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 (just for logging the events and values)

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

Is this a known issue? Are there any work-arounds?

解决方案

I had the same issue. This answer helped to resolve it:

The trick is to add a empty and disabled select option at the fist position:

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

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

This will prevent iOS from automatically selecting the first option and keep the selection values right and clean!

The empty option is not visible and the count of the selections is correct.

这篇关于iOS 9.2：选择列表（多个）不正确地触发更改事件，并将焦点设置为第一个选项。 （safari和chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！