9

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.

1
  • This issue still persists in iPadOS 17.0.1 with its Safari 17. 🤦‍♂️ Toggling readonly additionally with touchstart on the password input (and not only on focus) seems to work. (Of course, read-only elements should be focusable, but iOS Safari prematurely prevents firing.)
    – dakab
    Sep 26 at 6:42

2 Answers 2

6

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');
  });
});
2
  • There are 2 problems with that: (1) it kills page scroll if touch started from the input (2) it does not solve the problem if the input gets focus from Javascript (see jsfiddle.net/cw3hump4/1, touch the screen anywhere and the datepicker pops up) Sep 19, 2014 at 9:01
  • Thanks, but in my scenario I need focus management. Updated the question. I guess I have to live without focusing until the bug is fixed... Sep 19, 2014 at 9:56
-3

Try wrapping the input elements in a form elements, like

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

Ios8 don't like input elements thats not wrapped in a form element, seems to be a bug in ios8.

2
  • I just tried it, but it behaves the same (on 8.0.2 and 8.1 as well) Nov 14, 2014 at 14:14
  • You should try to avoid using multiple form fields on a page.
    – littlevahn
    Oct 14, 2016 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.