20

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:

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 $("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.

Community
  • 1
  • 1
Adam Marshall
  • 3,010
  • 9
  • 42
  • 80
  • Maybe changing the cursor in css. (http://www.w3schools.com/cssref/pr_class_cursor.asp) – mparryy Oct 10 '13 at 06:46
  • 1
    Instead of firing a `.blur()`, why not fire `.focus()` when the user clicks on the menu? – Ahmed Nuaman Nov 04 '13 at 13:59
  • good suggestion, but it doesn't work – Adam Marshall Nov 04 '13 at 14:01
  • 1
    Have you tried setting the `disabled` attribute on the input field when clicking on the menu? Rather dirty, but it should work. – Daniel Perván Nov 04 '13 at 14:03
  • You would hope so, but it doesn't. On iPad the keyboard remains open, the caret remains. The disable does work, i.e. if you then manually close the keyboard, the caret disappears and now you cannot select the textbox again as it has been disabled. – Adam Marshall Nov 04 '13 at 14:10

4 Answers4

2

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.

Adam Marshall
  • 3,010
  • 9
  • 42
  • 80
  • I am not using knockout and I can't find a way to solve this with the blur. This is on a tinymce container – Mika Andrianarijaona Apr 16 '14 at 12:13
  • It is an absolute nightmare. Sorry that my solution couldn't help. There are other frameworks/libraries that use binding, such as angularjs, I imagine a similar approach might work there. – Adam Marshall Apr 16 '14 at 12:33
0

You should try executing this code document.activeElement.blur(); right after the menu is opened.

Mauro Gava
  • 501
  • 3
  • 9
0

I was able to use visibility: hidden; for my solution.

coreylight
  • 81
  • 3
0

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.

cosi sierra
  • 1
  • 1
  • Just tried and the blinking cursor is still over my top bar. Unsure if it still works with the later version of iOS (I am using iOS 15.4 btw) – Terry Windwalker May 25 '22 at 21:54