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

当将焦点放在文本上时input在移动浏览器中（在 iOS Safari 和 Chrome 上测试），文本插入符号出现在任何文本的顶部div放在上面。

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

下面是效果截图：

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

我在这里尝试了答案：JQuery Mobile：聚焦输入文本不尊重 z-index，出现在其他所有内容之上 https://stackoverflow.com/q/12012895/1061602但它不起作用。

UPDATE经过更多挖掘后我也尝试这样做$("input").blur();切换菜单时div但这似乎也不适用于移动设备，但它确实消除了对桌面的关注。

UPDATE 2可能与此有关：iPad Safari 不触发模糊事件 https://stackoverflow.com/q/10914623/1061602，尽管如果我在 setTimeout 中而不是在事件侦听器中模糊文本框，则文本框会成功模糊。看看这个小提琴：http://jsfiddle.net/XQf8N/17/ http://jsfiddle.net/XQf8N/17/

UPDATE 3尝试将输入传递到隐藏的文本框似乎也不起作用http://jsfiddle.net/XQf8N/23/ http://jsfiddle.net/XQf8N/23/

UPDATE 4意识到我没有按照建议隐藏光标 -http://jsfiddle.net/XQf8N/24/ http://jsfiddle.net/XQf8N/24/- 当鼠标悬停在文本框上时，这只是隐藏鼠标指针，不会对插入符执行任何操作

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

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

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

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

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

好吧，不确定小提琴发生了什么，但是这个有效：http://jsfiddle.net/XQf8N/33/ http://jsfiddle.net/XQf8N/33/

这是相同的，除了手动监听事件然后调用blur()在文本框中，blur()从淘汰赛绑定中发射。

由于我使用的是淘汰赛，因此我也可以模糊淘汰赛事件绑定中的文本框。