如何以编程方式将文本输入集中在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有一些本机安全保护行为来阻止可写输入的程序化焦点,以防止恼人的键盘弹出窗口.此安全措施仅拒绝某些时刻未由真实用户交互启动的事件.

根据规范定义,用户启动的事件是受信任的事件: 规范条目

isTrusted属性必须返回初始化的值.创建事件时,必须将属性初始化为false.

isTrusted是一种便利,它指示用户代理是否调度事件(而不是使用dispatchEvent()).唯一的遗留异常是click(),这会导致用户代理将isTrusted属性初始化为false的事件分派.

您可以通过我的console.log陈述看到两者click和change事件都具有其isTrusted属性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 项目选项keyboardDisplayRequiresUserAction中有一个名为 的标志。可以设置为解除对原生 iOS 应用程序的使用限制。然而，对于普通的 Web 应用程序，我还没有看到任何关于 iOS 浏览器中这些限制的官方文档。falsefocus()

focus()在多次尝试在 iOS 中使用该元素失败后select，我发现的唯一解决方法是使用替换控件，例如 jQuery 的select2 ，如此jsfiddle中所示。CSS 属性可以进行细化，使其看起来更类似于本机选择元素。

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

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();
        });
    }
});