In iOS8 Safari, readonly inputs are handled incorrectly

Question

In Safari, iOS8, focusing in a date or a time input opens up the date or time picker and allows editing the content of the readonly input.

When focusing in a text input, a toolbar appears at the bottom with previous, next and Done buttons, and not going away until Done is tapped, or another input on the page is tapped.

When the input is focused programatically from Javascript, nothing is happening, but: if a touchstart event listener is added to some part of the page, touching anywhere will bring up the date, time picker, or the toolbar, even if the listener is empty.

Sample code:

<input id="test1" readonly />
<input id="test2" type="date" readonly />
<input id="test3" type="time" readonly />

<script>
    document.getElementById('test1').focus();
    window.addEventListener('touchstart', function () {});
</script>

Live example: http://jsfiddle.net/cw3hump4/embedded/result/

Any ideas or workarounds on how to avoid this?

UPDATE:

For usability/accessibility reasons I need focus management: tapping on the input opens up a dialog, when the dialog is closed, I put the focus back on the input. The input must be readonly, to prevent soft keyboard / date picker / time picker pop up, but cannot be disabled, so I can set a value, and focus on it.

Answer 1

I think this is a bug in Safari iOS8

Here is the workaround with jQuery.

$(function() {
  $('input[readonly]').on('touchstart', function(ev) {
    return false;
  });
});

EDIT:

how about this?

$(function() {
  $('input[readonly]').on('focus', function(ev) {
    $(this).trigger('blur');
  });
});