In iOS8 Safari, readonly inputs are handled incorrectly

问题

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:

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:

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.

来源：https://stackoverflow.com/questions/25928605/in-ios8-safari-readonly-inputs-are-handled-incorrectly

标签

javascript

html

ios

mobile-safari

ios8