Firefox下Alt+O快捷键触发隐藏文件选择框失效问题咨询

问题原因 #

Firefox 页面加载完成后默认焦点落在浏览器地址栏/工具栏区域，未聚焦到页面文档本身，所以绑定在 body 上的键盘事件无法被捕获。Chrome 焦点默认落在文档区域，因此可以直接触发。

可行解决方案 #

• 调整事件绑定对象为更顶层的document或者window，扩大事件捕获范围
• 给页面根元素设置可聚焦属性，页面加载完成后主动触发文档聚焦
• 修正原有代码中事件对象获取的逻辑问题，jQuery 已经统一处理了e.which的兼容性，无需额外做兼容判断

修正后完整代码 #

$(document).ready(function(){
  // 给body设置可聚焦属性并主动触发聚焦
  $('body').attr('tabindex', '-1').focus();
  // 绑定到document，覆盖更广的捕获范围
  $(document).keydown(function(e){
    if(e.altKey && e.which == 79){ //Alt+O = openFile
      // 阻止浏览器默认Alt+O打开菜单的行为
      e.preventDefault();
      e.stopPropagation();
      $("#xmlFile:hidden").trigger('click');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="xmlFile" style="display: none;" >

如果以上方案还有异常，可以在页面加载逻辑最后额外加一行window.focus()，强制将窗口焦点拉到页面内容区域。如果是定制版Firefox强制保留了系统快捷键优先级，可以考虑替换为其他未被浏览器默认占用的快捷键组合。

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