Adam Marshall Adam Marshall - 2 months ago 15
CSS Question

Text insertion cursor (caret) appears above other elements in mobile browser

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:

Here is a screenshot of the effect:

enter image description here

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
when toggling the menu
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:

UPDATE 3 Trying to pass input to a hidden textbox doesn't seem to work either

UPDATE 4 Realised I didn't look into hiding the cursor as suggested - - 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

UPDATE 6 This solution: does not work within the event listener, see fiddle:

UPDATE 7 This solution: 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:

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:

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.