Text insertion cursor (caret) appears above other elements in mobile browser
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.
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.