在iOS8 Safari中,只读输入处理不正确

时间:2014-09-19 07:28:50

标签: javascript html ios mobile-safari ios8

在Safari,iOS8中,聚焦日期或时间输入可打开日期或时间选择器,并允许编辑只读输入的内容。

当在文本输入中聚焦时,底部会显示一个工具栏,其中包含上一个,下一个和完成按钮,在点击“完成”或点击页面上的其他输入之前不会消失。

当输入以编程方式从Javascript聚焦时,没有任何事情发生,但是:如果将touchstart事件监听器添加到页面的某个部分,则触摸任何地方都会显示日期,时间选择器或工具栏,即使听众是空的。

示例代码:

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

关于如何避免这种情况的任何想法或解决方法?

更新:

出于可用性/可访问性的原因,我需要焦点管理:点击输入会打开一个对话框,当对话框关闭时,我将焦点重新放在输入上。输入必须是只读的,以防止软键盘/日期选择器/时间选择器弹出,但不能被禁用,所以我可以设置一个值,并专注于它。

2 个答案:

答案 0 :(得分:6)

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

以下是jQuery的解决方法。

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

编辑:

怎么样?

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

答案 1 :(得分:-3)

尝试将输入元素包装在表单元素中,例如

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

Ios8不喜欢未包含在表单元素中的输入元素,似乎是ios8中的错误。