当 iOS 11 Webview 失去焦点时，HTML <select> 停止触发 onchange 或 onblur

Posted 2023-02-23

【中文标题】当 iOS 11 Webview 失去焦点时，HTML <select> 停止触发 onchange 或 onblur

【英文标题】：HTML <select> stops firing onchange or onblur when iOS 11 Webview loses focus

【发布时间】：2018-10-29 15:12:55

【问题描述】：

我正在为 ios 开发一个混合（web+native）应用程序。应用程序的 Web 部分是 WKWebView（位于 UINavigationController 上）中的 SPA。该网站有一个<select> 元素和一个onchange/onblur 处理程序。当用户点击<select> 元素时，会出现本机选择轮。然后，当用户点击本地选择器的 Done 按钮时，onchange 和 onblur 处理程序会立即被触发。这一切都按预期工作。

由于这是一个混合应用程序，有时应用程序会将视图控制器推送到 UINavigationController（在 Web 视图之上）。当该视图控制器被弹出并且焦点返回到 Web 视图时，一切似乎都像以前一样工作。

但是，<select> 元素现在只会在用户从元素上轻按 离开 时触发 onchange 和 onblur 事件。如果用户更新他们的选择并点击完成，选择器将关闭，但选择元素的值保持不变。只有在元素外部点击后，值才会更新，onchange/onblur 事件才会触发。

新的视图控制器何时被推送和弹出并不重要，即使它是在<select> 元素尚未创建之前。如果在 web 视图的生命周期中的任何时候它被新的视图控制器覆盖，这个 bug 将在 100% 的时间内发生，直到 web 视图被销毁。

示例代码（这里没什么特别的）：

html：

<select id="mySelect">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

JS：

document.getElementById("mySelect").onchange = function() 
    console.log("hello");

此问题仅在 iOS 11 和 12 中出现。它是 Mobile Safari 特有的错误吗？任何帮助将不胜感激。

【问题讨论】：

尝试使用<select onchange="console.log('hello');">

不走运。 onchange 处理程序本身工作正常，只是 Safari 在点击其他内容之前不会触发它。即使没有 onchange 处理程序，错误仍然很明显，因为元素的值也不会改变。

这可能是一个错误，因为即使在 *** 中您也必须再次单击。至少在野生动物园

遇到同样的问题，但时断时续。知道为什么会发生这种情况或如何解决吗？我注意到即使是文本输入在按下完成后也不会失去焦点。

@Kevin_TA 遗憾的是，我还没有找到解决办法。我停止研究它，因为它是一个相对较低优先级的问题。如果我回到它并弄清楚它，我会发布一个答案。

【参考方案1】：

我最近发现，如果您将optgroups 添加到选择中，事件似乎会正确触发。我一直在将空的附加到选择中，现在似乎正在工作。

【讨论】：

我想知道这是否是因为查看WebKit source code 每种类型的选择都有不同的类。该错误存在于 WKSelectSinglePicker 中，但不存在于 WKMultipleSelectPicker 中。

另一个问题是 AutoLayout 实际上在本机选择器中被破坏了。当我在 = iOS 11 中调试，您会收到一个损坏的约束警告。我想知道这是否相关？