文本插入游标（插入符号）出现在移动浏览器中的其他元素上方 [英] Text insertion cursor (caret) appears above other elements in mobile browser

问题描述

当在移动浏览器（在iOS Safari和Chrome上测试）中将焦点置于文本输入时，文本插入符会出现在任何

这是一个简单的例子：，但它不工作。

UPDATE 经过一些更多的挖掘之后，我还试图在切换菜单<$ c时尝试执行 $（input）blur（）; $ c> div ，但在移动设备上似乎不起作用，但它确实移除了桌面焦点。

strong> UPDATE 2 可能与此相关： iPad Safari不会触发模糊事件，但如果我模糊在setTimeout中的文本框，而不是在事件侦听器中，文本框会成功模糊。查看此小提琴： http://jsfiddle.net/XQf8N/17/

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

UPDATE 4 已实现我没有按照建议的方式隐藏光标 - http://jsfiddle.net/XQf8N/24/ - 当鼠标悬停在文本框上时，只需隐藏鼠标指针，不对插入符号执行任何操作

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

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

UPDATE 7 此解决方案： http://stackoverflow.com/a/6473076/1061602 无法使用，与停用文字方块的效果相同

UPDATE 8 模糊使用knockout工作绑定的函数中的文本框： http://jsfiddle.net/XQf8N/33/

任何想法原始事件监听器？希望这个疑难排解对某人有帮助，如果他们有同样的问题。

解决方案

确定，不知道发生了什么，但这个工作原理： http://jsfiddle.net/XQf8N/33/

这是相同的，除了不是手动侦听事件，然后在文本框上调用 blur（），<$

由于我使用knockout，我可以模糊文本框敲除事件绑定。

When giving focus to a text input in a mobile browser (tested on iOS Safari and Chrome), the text caret appears over the top of any divs placed on top.

Here is a quick, simple example: http://jsfiddle.net/XQf8N/

Here is a screenshot of the effect:

What would be the best way of working around this?

I tried the answer here: JQuery Mobile: focused input text doesn't respect z-index, appearing above everything else but it did not work.

UPDATE After some more digging I also tried to do $("input").blur(); when toggling the menu div but that doesn't seem to work on the mobile device either, it does remove focus on the desktop though.

UPDATE 2 May be related to this: iPad Safari does not fire blur event, although if I blur the textbox in a setTimeout, not in the event listener, the textbox does blur successfully. See this fiddle: http://jsfiddle.net/XQf8N/17/

UPDATE 3 Trying to pass input to a hidden textbox doesn't seem to work either http://jsfiddle.net/XQf8N/23/

UPDATE 4 Realised I didn't look into hiding the cursor as suggested - http://jsfiddle.net/XQf8N/24/ - this just hides the mouse pointer when hovering over the textbox, doesn't do anything to the caret

UPDATE 5 Suggestion to disable the textbox, this doesn't lose focus and doesn't close the keyboard http://jsfiddle.net/XQf8N/27/

UPDATE 6 This solution: http://stackoverflow.com/a/7761438/1061602 does not work within the event listener, see fiddle: http://jsfiddle.net/XQf8N/29/

UPDATE 7 This solution: http://stackoverflow.com/a/6473076/1061602 does not work either, same result as disabling the text box

UPDATE 8 Blurring the textbox within a function that is bound using knockout works: http://jsfiddle.net/XQf8N/33/

Any ideas what is wrong with the original event listener? Hopefully this troubleshooting will be helpful to someone if they have the same issue.

解决方案

OK, not sure what has happened with the fiddle, but this one works: http://jsfiddle.net/XQf8N/33/

This is the same, except instead of manually listening for the events and then calling blur() on the textbox, the blur() is fired from a knockout binding.

As I am using knockout, I may as well blur the textbox in the knockout event binding instead.

这篇关于文本插入游标（插入符号）出现在移动浏览器中的其他元素上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！