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

Question

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

我发现 post 建议执行类似下面代码的操作，但它 returns 在 chrome 和 FF 上都是错误的。

$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">

Answer 2

阅读How to detect Safari, Chrome, IE, Firefox and Opera browser?

它有浏览器检测技术、演示和实现方法。他解释说，如果是特定浏览器，则将布尔变量设置为 true。所以你可以访问它并单独在特定浏览器上显示特定内容。

例如：var isChrome = !!window.chrome && !isOpera;

这将设置变量 isChrome

现在您可以在 java 脚本中动态创建内容并在设置 isChrome 时显示。

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

Hide element on Firefox/IE and show only on chrome

javascript

css

webkit

input-type-file