在iOS8 Safari中,只读输入处理不正确 [英] In iOS8 Safari, readonly inputs are handled incorrectly
问题描述
在Safari,iOS8中,聚焦日期或时间输入会打开日期或时间选择器,并允许编辑只读输入的内容。
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.
当输入以编程方式从Javascript聚焦时,没有任何事情发生,但是:如果将touchstart事件监听器添加到页面的某个部分,触摸任何地方都会显示日期,时间选择器或工具栏,即使监听器也是如此是空的。
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.
示例代码:
<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/
关于如何避免这种情况的任何想法或解决方法?
Any ideas or workarounds on how to avoid this?
更新:
出于可用性/可访问性的原因,我需要进行焦点管理:点击输入会打开一个对话框,当对话框出现时关闭,我把重点放在输入上。输入必须是只读的,以防止软键盘/日期选择器/时间选择器弹出,但不能被禁用,所以我可以设置一个值,并专注于它。
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.
推荐答案
我认为这是Safari iOS8中的一个错误
I think this is a bug in Safari iOS8
以下是jQuery的解决方法。
Here is the workaround with jQuery.
$(function() {
$('input[readonly]').on('touchstart', function(ev) {
return false;
});
});
编辑:
这个怎么样?
$(function() {
$('input[readonly]').on('focus', function(ev) {
$(this).trigger('blur');
});
});
这篇关于在iOS8 Safari中,只读输入处理不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!