问题
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: https://stackoverflow.com/a/7761438/1061602 does not work within the event listener, see fiddle: http://jsfiddle.net/XQf8N/29/
UPDATE 7 This solution: https://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.
回答1:
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.
回答2:
You should try executing this code document.activeElement.blur(); right after the menu is opened.
回答3:
I was able to use visibility: hidden; for my solution.
回答4:
I was running into the same issue when my side bar was opening on top of a form (I could still see the blinking cursor over the side bar). I ended up solving it through this answer: Position fixed not working in mobile browser
I used -webkit-backface-visibility: hidden; on my position: fixed element and set the parent to be position: relative. I read that -webkit-backface-visibility could be "promoting things into a new stacking context and therefore forcing a different render". I'm not sure which positioning your element has, but I hope this is relevant and helpful.
来源：https://stackoverflow.com/questions/19245658/text-insertion-cursor-caret-appears-above-other-elements-in-mobile-browser