Search code examples
javascripthtmliosiphonemobile-safari

Events stop firing when focused on readonly input on iPhone

I have readonly input filed:

<div class="wrapper">
    <input type="text" readonly="readonly" />
</div>

it has "click" and "focus" events attached. Everything works well on all browsers except safari on iPhone (tested on iPhone 5, and iPhone 6). After few clicks on input field blue text cursor appears and input is no longer accepting clicks (event is not firing).

enter image description here

I read in similar question that you can just fire blur event on input when focused, but I need to keep track of focused element (I'm using focusin and focusout events on wrapper).

In addition I need this field to be focusable by Tab key on other browsers.

here is my code: https://jsfiddle.net/0tr1afv2/

[edit] I've changed the order of log message appearing - now on jsfiddle newer are on top. The screenshot is showing the log in other way.

Solution

  • I recently had issues with the click event using mobile devices. Try adding the following to your javascript:

    input.addEventListener("touchstart", function () {c.log("input click");});

    More information on the subject here: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events