When giving focus to a text
in a mobile browser (tested on iOS Safari and Chrome), the text caret appears over the top of any
s 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.
After some more digging I also tried to do
when toggling the menu
but that doesn't seem to work on the mobile device either, it does remove focus on the desktop though.
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/
Trying to pass input to a hidden textbox doesn't seem to work either http://jsfiddle.net/XQf8N/23/
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
Suggestion to disable the textbox, this doesn't lose focus and doesn't close the keyboard http://jsfiddle.net/XQf8N/27/
This solution: http://stackoverflow.com/a/7761438/1061602
does not work within the event listener, see fiddle: http://jsfiddle.net/XQf8N/29/
This solution: http://stackoverflow.com/a/6473076/1061602
does not work either, same result as disabling the text box
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.