在iOS8 Safari中，只读input处理不正确

在Safari，iOS8中，聚焦于date或时间input会打开date或时间select器，并允许编辑只读input的内容。

在文本input中进行对焦时，工具栏的底部会显示上一个，下一个和完成button，在点按完成或点击页面上的其他input之后才会离开。

当input从Javascript以编程方式聚焦时，没有任何事情发生，但是：如果触摸事件监听器被添加到页面的某个部分，触摸任何地方都会popupdate，时间select器或工具栏，即使监听器为空。

示例代码：

<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> 

现场示例： http : //jsfiddle.net/cw3hump4/embedded/result/

任何想法或解决方法如何避免这种情况？

更新：

出于可用性/可访问性的原因，我需要焦点pipe理：点击input打开一个对话框，当对话框closures时，我把焦点放回到input。 该input必须是只读的，以防止软键盘/dateselect器/时间select器popup，但不能被禁用，所以我可以设置一个值，并专注于它。

Answer 1

我认为这是Safari iOS8中的一个错误

这是jQuery的解决方法。

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

编辑：

这个怎么样？

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

Answer 2

尝试将input元素包装在表单元素中

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

Ios8不喜欢那些没有包含在表单元素中的input元素，似乎是ios8中的一个bug。