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

Posted 2023-03-14

【中文标题】在 iOS8 Safari 中，只读输入处理不正确

【英文标题】：In iOS8 Safari, readonly inputs are handled incorrectly

【发布时间】：2014-09-19 07:28:50

【问题描述】：

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

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

更新：

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

【参考方案1】：

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

这是使用 jQuery 的解决方法。

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

编辑：

这个怎么样？

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

【讨论】：

这有两个问题：（1）如果从输入开始触摸，它会终止页面滚动（2）如果输入从 Javascript 获得焦点，它不会解决问题（参见jsfiddle.net/cw3hump4/1，触摸屏幕任意位置，日期选择器弹出）

谢谢，但在我的场景中，我需要焦点管理。更新了问题。我想在修复错误之前我必须不专注地生活......

【参考方案2】：

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

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

ios8 不喜欢没有包裹在表单元素中的输入元素，这似乎是 ios8 中的一个错误。

【讨论】：

我刚试过，但它的行为相同（在 8.0.2 和 8.1 上也是如此）

你应该尽量避免在一个页面上使用多个表单域。