javascript - 如何以编程方式在 iOS 中聚焦来自 select 标签的受信任 onchange 事件的文本输入？

Question

我在下面准备了一个简单的片段，一个文本输入字段，一个按钮和一个选择。单击按钮以编程方式聚焦输入。更改选择也会关注输入。在所有桌面浏览器和 android 中都是这种情况，但在 iOS 中不是。在 iOS 中，焦点适用于按钮，但不适用于选择。

var mySelect = document.getElementById('mySelect');
var myButton = document.getElementById('myButton');
var myTextInput = document.getElementById('myTextInput');

mySelect.addEventListener('change', function(changeEvent) {
  console.log('Change event trusted: ' + changeEvent.isTrusted);
  myTextInput.focus();
});

myButton.addEventListener('click', function(clickEvent) {
  console.log('Click event trusted: ' + clickEvent.isTrusted);
  myTextInput.focus();
});

<select id="mySelect">
  <option value="0">Option 1</option>
  <option value="1">Option 2</option>
</select>
<button id="myButton">Focus through onclick</button>
<input id="myTextInput" type="text" />

iOS 似乎有一些 native 保护行为来阻止可写输入的编程焦点，以防止烦人的键盘弹出窗口。此保护措施仅拒绝在某些时候并非由真实用户交互发起的事件。

根据规范定义，用户发起的事件是可信事件: Spec entry

The isTrusted attribute must return the value it was initialized to. When an event is created the attribute must be initialized to false.

isTrusted is a convenience that indicates whether an event is dispatched by the user agent (as opposed to using dispatchEvent()). The sole legacy exception is click(), which causes the user agent to dispatch an event whose isTrusted attribute is initialized to false.

你可以看穿我的console.log click 的声明和 change事件有它们的 isTrusted属性(property)true ，但后者无论如何都被 iOS 阻止了。

我搜索了很多，但未能找到描述此 iOS 行为是否有意的声明。

有人知道吗？是否有办法获得 <select>的更改事件以成功聚焦输入并调出键盘？

我尝试了很多方法，主要使用 click , mouseup和 mousedown在 select 上直接，但是男孩是那些在不同浏览器上不一致的事件......

总而言之，这是上面显示的相同代码段的 jsfiddle。 https://jsfiddle.net/qndg7sex/4/

注意它是如何包含“性”这个词的。

编辑

我试过引入一个假人 button谁的click将由 select 触发的 change .在这个虚拟 button的处理程序我试图 .focus input ，但无济于事。

编辑 2

我决定将赏金奖励给 ConnorsFan。事实上，我们没有得到有关 iOS 行为的官方条目的更新，这让我更加相信，确实没有任何关于它的公开信息。我还将答案标记为已接受，因为我的方法与那里提出的解决方案非常相似。实际上并没有涉及 jQuery 插件，但它采用了一个自定义输入元素，该元素的行为无论如何都像一个选择。

Answer 1

您可能发现 Cordova project options 中有一个名为 keyboardDisplayRequiresUserAction 的标志.可以将其设置为 false 以解除对在 native iOS 应用程序中使用 focus() 的限制。然而，对于普通的 Web 应用程序，我还没有看到任何关于 iOS 浏览器中这些限制的官方文档。

在多次尝试使 focus() 与 iOS 中的 select 元素一起工作后，我发现唯一的解决方法是使用替换控件，例如 jQuery 的select2 ，如 this jsfiddle 中所示 。可以改进 CSS 属性，使其看起来更类似于 native 选择元素。

可以在列表项的 mouseup 事件处理程序中调用 myTextInput.focus()，该处理程序已在第一次下拉列表时设置打开:

var firstOpen = true;

$(mySelect).select2({
    minimumResultsForSearch: Infinity
}).on('change', function(e) {
    console.log("change event was fired");
}).on('select2:open', function(e) {
    if (firstOpen) {
        firstOpen = false;
        $('.select2-results ul').on('mouseup', function(e) {
            myTextInput.focus();
        });
    }
});