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

Question

当将焦点放在input移动浏览器中的文本上(在iOS Safari和Chrome上测试)时,文本插入符号会显示在顶部的任何div顶部.

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

以下是效果的屏幕截图:

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

我在这里尝试了答案:JQuery Mobile:专注的输入文本不尊重z-index,出现在其他所有内容之上,但它不起作用.

更新在进行了一些挖掘之后,我还尝试$("input").blur();在切换菜单时进行操作,div但这似乎也无法在移动设备上运行,但它确实在桌面上移除焦点.

更新2可能与此相关:iPad Safari不会触发模糊事件,但如果我在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()从淘汰绑定中触发。

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