如何禁用iOS点击只读输入框时的自动填充与分享按钮

问题背景 #

在iOS 17系统中，点击只读状态的文本输入框（或选择日期后的日期输入框）时，屏幕左上角会弹出自动填充及分享选项，该问题存在于iOS全浏览器环境，安卓和桌面平台无此现象。

已尝试添加autocomplete="off"、autocorrect="off"属性，无法解决该问题。

复现示例代码：

<input type="text" placeholder="This is a readonly input" value="some content" readonly>

可行解决方法 #

1. 禁用输入框点击交互（CSS） #

通过pointer-events: none完全禁止输入框的点击事件，从源头阻止系统触发弹窗逻辑：

input[readonly] {
  pointer-events: none;
  /* 可选：添加视觉提示，明确不可交互状态 */
  opacity: 0.7;
  cursor: default;
}

若需要保留文本选中功能，建议改用<span>/<div>模拟只读输入框的展示效果。

2. 用非输入框元素模拟只读状态 #

将只读输入框替换为普通元素，避免iOS系统对输入框的自动处理：

<span style="padding: 8px; border: 1px solid #ccc; border-radius: 4px; display: inline-block;">some content</span>

3. 添加WebKit专属只读样式 #

针对iOS的WebKit内核，添加-webkit-user-modify: read-only属性，明确标记元素只读：

input[readonly] {
  -webkit-user-modify: read-only;
}

4. 动态设置输入框为禁用状态（针对日期输入场景） #

对于选择日期后触发弹窗的问题，可在日期选择完成后将输入框设置为disabled（注意此设置会禁止文本选中，需根据业务需求选择）：

// 示例：监听日期输入框的change事件
document.getElementById('dateInput').addEventListener('change', function() {
  this.disabled = true;
});

内容的提问来源于stack exchange，提问作者Abdul Rauf