iOS 17+ 在启用全键盘访问时会强制自动展开 select 元素，破坏表单焦点逻辑与用户体验；本文提供兼容性修复方案，通过禁用自动聚焦、改用 button 模拟 + 自定义下拉实现跨平台一致行为。
ios 17+ 在启用全键盘访问（full keyboard access）后，html `
问题本质：系统级干预，非 CSS/JS 可直接禁用
Apple 将此行为视为“辅助功能增强”——当检测到外接键盘且开启全键盘访问时，系统会主动触发 <select> 的原生弹出面板以提升可访问性。遗憾的是，目前没有任何标准属性（如 autofocus="false"）、CSS 规则（如 -webkit-appearance: none）或 JavaScript 阻止默认行为（event.preventDefault() 对 focus 事件无效）能直接关闭该自动展开。
✅ 推荐解决方案：渐进式降级 —— 用 <button> + <datalist> 或自定义下拉替代
最可靠、符合 Web 标准且无障碍友好的方式是放弃原生 <select>，改用语义化、可控的自定义下拉组件。以下为轻量级实现（无需框架）：
<!-- 替代原生 select 的可访问下拉 -->
<div class="custom-select" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="select-label">
<span id="select-label" class="visually-hidden">请选择选项</span>
<button
type="button"
class="select-trigger"
aria-controls="select-options"
aria-describedby="select-desc"
>
<span class="select-value">[请先选择]</span>
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 10l5 5 5-5z"/>
</svg>
</button>
<ul id="select-options" class="select-options" role="listbox" hidden>
<li role="option" tabindex="0" data-value="">[请先选择]</li>
<li role="option" tabindex="0" data-value="1">选项 1</li>
<li role="option" tabindex="0" data-value="2">选项 2</li>
<li role="option" tabindex="0" data-value="3">选项 3</li>
</ul>
<div id="select-desc" class="visually-hidden">使用方向键选择，回车确认</div>
</div>
<style>
.custom-select { position: relative; }
.select-trigger {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px; border: 1px solid #ccc; background: #fff;
border-radius: 4px; cursor: pointer; width: 200px;
}
.select-options {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; border: 1px solid #ccc; border-top: none;
max-height: 200px; overflow-y: auto; z-index: 10;
}
.select-options[hidden] { display: none; }
.select-options li {
padding: 8px 12px; cursor: pointer;
}
.select-options li:hover, .select-options li:focus { background: #f5f5f5; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
</style>
<script>
const selectEl = document.querySelector('.custom-select');
const triggerBtn = selectEl.querySelector('.select-trigger');
const optionsList = selectEl.querySelector('.select-options');
const valueSpan = selectEl.querySelector('.select-value');
const options = selectEl.querySelectorAll('.select-options li');
let isOpen = false;
triggerBtn.addEventListener('click', () => {
isOpen = !isOpen;
optionsList.hidden = !isOpen;
selectEl.setAttribute('aria-expanded', isOpen);
if (isOpen) options[0].focus();
});
options.forEach((opt, i) => {
opt.addEventListener('click', () => {
const val = opt.dataset.value;
valueSpan.textContent = opt.textContent;
// 同步隐藏并重置状态
optionsList.hidden = true;
isOpen = false;
selectEl.setAttribute('aria-expanded', 'false');
// 可选：触发自定义 change 事件供业务逻辑使用
selectEl.dispatchEvent(new CustomEvent('selectchange', { detail: { value: val } }));
});
opt.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
opt.click();
} else if (e.key === 'Escape') {
optionsList.hidden = true;
isOpen = false;
selectEl.setAttribute('aria-expanded', 'false');
triggerBtn.focus();
}
});
});
// 键盘导航支持：Tab 进入后按 ↓ 展开
triggerBtn.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown' && !isOpen) {
e.preventDefault();
isOpen = true;
optionsList.hidden = false;
selectEl.setAttribute('aria-expanded', 'true');
options[0].focus();
}
});
</script>⚠️ 注意事项与最佳实践
- 无障碍必须保留：确保 role="combobox"、aria-expanded、aria-haspopup、role="option" 等属性正确设置，并支持键盘导航（↑↓切换、Enter 确认、Escape 关闭）；
- 移动端触控优化：为 .select-trigger 和 li 添加足够点击热区（最小 44×44pt），避免 iOS Safari 的“意外触发”；
-
服务端兼容性：若后端依赖 <select name="myselect">，需在提交前将自定义值写入隐藏域：
<input type="hidden" name="myselect" id="myselect-hidden" value="">
并在 selectchange 事件中同步更新：
document.getElementById('myselect-hidden').value = val; - 不要尝试 hack 原生 select：诸如 blur() 立即失焦、setTimeout(() => el.blur(), 0)、监听 focusin 并 preventDefault() 等方法在 iOS 17+ 中均已失效，且可能引发不可预测的 UI 卡顿或焦点丢失。
总结
iOS 对 <select> 的自动展开是系统级行为，无法通过前端代码“禁用”，但可通过语义化自定义下拉组件完全规避。该方案不仅解决 iPhone 键盘导航断裂问题，还提升多端一致性、可测试性与设计自由度。对于已有项目，建议采用渐进增强策略：优先检测 navigator.userAgent.includes('iPhone') && 'ontouchstart' in window，再动态挂载自定义组件，确保降级平稳。
立即学习“前端免费学习笔记（深入）”；
? 补充说明：Apple 已确认此为已知行为（非 bug），官方文档未提供禁用开关。截至 iOS 17.5，仍无 WebKit 配置项可绕过。因此，拥抱可控组件是当前唯一稳健路径。
