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

【问题标题】：Text insertion cursor (caret) appears above other elements in mobile browser文本插入光标（插入符号）出现在移动浏览器中的其他元素上方
【发布时间】：2013-10-08 10:47:25
【问题描述】：

当在移动浏览器中关注文本 input（在 iOS Safari 和 Chrome 上测试）时，文本插入符号会出现在任何位于顶部的 divs 的顶部。

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

下面是效果截图：

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

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

更新经过更多挖掘后，我还尝试在切换菜单 div 时执行 $("input").blur();，但这似乎在移动设备上也不起作用，它确实消除了对不过桌面。

更新 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/ - 这只是在将鼠标悬停在文本框上时隐藏了鼠标指针，对插入符号没有任何作用

UPDATE 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/

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

【问题讨论】：

也许改变css中的光标。 (w3schools.com/cssref/pr_class_cursor.asp)
当用户点击菜单时，为什么不触发.blur()，而不是触发.focus()？
很好的建议，但它不起作用
您是否尝试在单击菜单时在输入字段上设置disabled 属性？相当脏，但它应该可以工作。
您希望如此，但事实并非如此。在 iPad 上，键盘保持打开状态，插入符号保持不变。禁用确实有效，即如果您随后手动关闭键盘，插入符号会消失，现在您无法再次选择文本框，因为它已被禁用。

标签： html css mobile input z-index

【解决方案1】：

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

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

由于我使用的是淘汰赛，我不妨模糊淘汰赛事件绑定中的文本框。

【讨论】：

我没有使用淘汰赛，我找不到解决这个模糊问题的方法。这是在一个 tinymce 容器上
这绝对是一场噩梦。抱歉，我的解决方案无济于事。还有其他使用绑定的框架/库，例如 angularjs，我想类似的方法可能在那里工作。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我可以使用visibility: hidden; 来解决我的问题。

【讨论】：

【解决方案4】：

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

我在position: fixed 元素上使用了-webkit-backface-visibility: hidden;，并将父元素设置为position: relative。我读到-webkit-backface-visibility 可能是“将事物提升到新的堆叠上下文中，因此强制进行不同的渲染”。我不确定您的元素的定位是什么，但我希望这是相关且有用的。

【讨论】：