iPhone Voiceover选择建议后焦点未移至输入combobox问题咨询

开发者阿泽

2026-8-10

iPhone VoiceOver 下 Combobox 选择后焦点不回输入框的修复方案

问题现象

在iPhone VoiceOver环境中，选择combobox下拉建议后，焦点无法正确转移到输入框——即便通过JavaScript调用focus()方法，焦点也会跳转到其他元素。该问题在W3C ARIA combobox官方示例中同样存在。预期行为为：选择建议后焦点自动回到输入框，保证VoiceOver的朗读逻辑连贯。

可行修复方案

1. 使用`setTimeout`延迟触发焦点设置

VoiceOver在处理选择事件时可能会抢占焦点，延迟执行可以避开这个时机：

// 选择建议后的处理逻辑
function handleSelect(item) {
  // 填充选中值到输入框
  inputElement.value = item.textContent;
  // 关闭下拉列表
  dropdownElement.hidden = true;
  // 延迟100ms设置焦点，避开VoiceOver的焦点抢占
  setTimeout(() => {
    inputElement.focus();
    // 可选：将光标移至文本末尾，优化输入体验
    inputElement.setSelectionRange(inputElement.value.length, inputElement.value.length);
  }, 100);
}

2. 给输入框添加`aria-live`属性强化感知

配合焦点设置，添加实时区域属性让VoiceOver主动朗读输入框内容，明确焦点位置：

<input 
  type="text" 
  role="combobox" 
  aria-controls="dropdown-list"
  aria-expanded="false"
  aria-live="polite"
  id="combobox-input"
>

3. 主动触发VoiceOver焦点播报（iOS 14+支持）

在设置焦点后，通过语音合成API主动告知VoiceOver焦点状态，确保用户感知：

setTimeout(() => {
  inputElement.focus();
  if (window.speechSynthesis) {
    const utterance = new SpeechSynthesisUtterance(inputElement.value || inputElement.getAttribute('aria-label'));
    speechSynthesis.speak(utterance);
  }
}, 100);