如何修改代码避免iPhone上HTML select获焦时自动展开？

几个月前iPhone/iOS新增了一项行为：HTML <select> 元素获得焦点时，无论使用哪种浏览器，下拉列表都会自动展开。此前无此情况，且Mac、PC及所有Android设备上，下拉列表仅在点击后才展开。

需要修改以下代码，使iPhone上的select获焦时不会自动展开：

<html>
  <body>
    <select name="myselect">
      <option value="">[Please select]</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <p>
    <input type="button" value="Set focus to selection" onclick="document.getElementsByName('myselect')[0].focus();">
  </body>
</html>

方法1：针对iOS阻止focus默认行为 #

通过检测iOS设备，在select的focus事件中阻止默认行为，同时手动模拟原生焦点样式（避免阻止默认后失去视觉反馈）：

<html>
  <body>
    <select name="myselect" id="myselect">
      <option value="">[Please select]</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <p>
    <input type="button" value="Set focus to selection" onclick="setSelectFocus();">

    <style>
      .ios-focus {
        outline: 2px solid #0071e3; /* 模拟iOS原生焦点边框 */
        outline-offset: -2px;
      }
    </style>

    <script>
      // 检测iOS设备，用platform判断比userAgent更准确
      const isIOS = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform);
      const selectEl = document.getElementById('myselect');

      selectEl.addEventListener('focus', (e) => {
        if (isIOS) {
          e.preventDefault();
          selectEl.classList.add('ios-focus');
        }
      });

      selectEl.addEventListener('blur', () => {
        selectEl.classList.remove('ios-focus');
      });

      function setSelectFocus() {
        if (isIOS) {
          selectEl.classList.add('ios-focus');
          selectEl.tabIndex = 0; // 确保元素在可访问性列表中可被聚焦
        } else {
          selectEl.focus();
        }
      }
    </script>
  </body>
</html>

方法2：用隐藏代理元素接收焦点 #

如果方法1存在兼容性问题，可以用一个隐藏的input元素承接焦点，给select添加视觉焦点样式，点击select时再触发原生下拉逻辑：

<html>
  <body>
    <div style="position: relative;">
      <select name="myselect" id="myselect">
        <option value="">[Please select]</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
      <!-- 隐藏的代理元素，用于接收焦点 -->
      <input type="text" id="proxyFocus" style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;">
    </div>
    <p>
    <input type="button" value="Set focus to selection" onclick="setSelectFocus();">

    <style>
      .select-focused {
        outline: 2px solid #0071e3;
        outline-offset: -2px;
      }
    </style>

    <script>
      const isIOS = ['iPhone', 'iPad', 'iPod'].includes(navigator.platform);
      const selectEl = document.getElementById('myselect');
      const proxyEl = document.getElementById('proxyFocus');

      // 点击select时，移除代理焦点，触发原生下拉
      selectEl.addEventListener('mousedown', () => {
        if (isIOS) {
          proxyEl.blur();
          selectEl.classList.remove('select-focused');
        }
      });

      function setSelectFocus() {
        if (isIOS) {
          proxyEl.focus();
          selectEl.classList.add('select-focused');
        } else {
          selectEl.focus();
        }
      }

      // 代理元素失焦时，移除select的焦点样式
      proxyEl.addEventListener('blur', () => {
        selectEl.classList.remove('select-focused');
      });
    </script>
  </body>
</html>

注意点 #

• 设备检测用navigator.platform比userAgent更可靠，避免被浏览器UA伪装干扰
• 两种方案都保留了可访问性支持，确保屏幕阅读器能识别元素状态
• 方法1更贴近原生逻辑，方法2兼容性更强，可根据实际场景选择

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