javascript - 在 Firefox/IE 上隐藏元素，仅在 chrome 上显示

Question

我正在使用 <input type="file" webkitdirectory>在 Chrome 上选择文件夹。虽然我知道此功能仅适用于 Chrome，但我想在不支持它的浏览器(如 Firefox 和 IE)上隐藏此按钮。

我找到了一篇建议执行类似以下代码的帖子，但它在 chrome 和 FF 上都返回 false。

$scope.isDirSupp = function() {
    var tmpInput = $('#bulkyFolder');
    if ('webkitdirectory' in tmpInput 
        || 'mozdirectory' in tmpInput 
        || 'odirectory' in tmpInput 
        || 'msdirectory' in tmpInput 
        || 'directory' in tmpInput) return true;

    return false;
}

html: <input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">

在 Chrome 上显示此按钮并在 Firefox 和 IE 上隐藏它的最佳方式是什么？

Answer 1

您可以使用 CSS 仅在 Chrome 上显示输入元素。

#bulkyFolder {
  display: none;
}
#bulkyFolder:not(*:root) { /* Supports only WebKit browsers */
  display: block;
}

<input type="file" webkitdirectory id="bulkyFolder" ng-show="isDirSupp">