文本插入光标（插入符号）显示在移动浏览器中的其他元素上方

Question

在移动浏览器中对文本input进行关注时（在iOS Safari和Chrome上测试），文本插入符号会显示在顶部的任何div的顶部。

以下是一个简单快速的示例：http://jsfiddle.net/XQf8N/

以下是效果的屏幕截图：

解决这个问题的最佳方法是什么？

我在这里尝试了答案：JQuery Mobile: focused input text doesn't respect z-index, appearing above everything else但它没有用。

更新经过多次挖掘后，我还尝试切换菜单$("input").blur();时div，但这似乎也不适用于移动设备，它确实尽管在桌面上移除焦点。

更新2 可能与此相关：iPad Safari does not fire blur event，但如果我在setTimeout中模糊文本框而不是在事件侦听器中，则文本框会成功模糊。看到这个小提琴：http://jsfiddle.net/XQf8N/17/

更新3 尝试将输入传递到隐藏文本框似乎无效http://jsfiddle.net/XQf8N/23/

更新4 已实现我没有按照建议隐藏光标 - http://jsfiddle.net/XQf8N/24/ - 当鼠标悬停在文本框上时，它只是隐藏了鼠标指针，对此没有任何作用插入符号

更新5 建议禁用文本框，这不会失去焦点，也不会关闭键盘http://jsfiddle.net/XQf8N/27/

更新6 此解决方案：https://stackoverflow.com/a/7761438/1061602在事件监听器中不起作用，请参阅小提琴：http://jsfiddle.net/XQf8N/29/

更新7 此解决方案：https://stackoverflow.com/a/6473076/1061602也不起作用，与禁用文本框的结果相同

更新8 在使用淘汰赛绑定的函数中模糊文本框：http://jsfiddle.net/XQf8N/33/

任何想法原始事件监听器有什么问题？希望如果遇到相同的问题，此故障排除将对某人有所帮助。

Answer 1

好的，不知道小提琴发生了什么，但这个有效：http://jsfiddle.net/XQf8N/33/

这是相同的，除了手动侦听事件然后在文本框上调用blur()之外，blur()是从敲除绑定中触发的。

当我使用淘汰赛时，我也可以模仿淘汰赛事件绑定中的文本框。

Answer 2

您应该在菜单打开后立即尝试执行此代码document.activeElement.blur();。

Answer 3

我能够使用visibility: hidden;作为我的解决方案。

Answer 4

当我的侧边栏在表单顶部打开时，我遇到了同样的问题（我仍然可以看到侧边栏上方闪烁的光标）。我最终通过以下答案解决了它： Position fixed not working in mobile browser

我在-webkit-backface-visibility: hidden;元素上使用了position: fixed，并将父级设置为position: relative。我读到-webkit-backface-visibility可能是“将事物提升到新的堆栈上下文中，因此强制使用其他呈现器”。我不确定您的元素位于哪个位置，但是我希望这是相关且有用的。