Question

我一直在搜索这几天，到目前为止，我能想到的最好的是查看下面的列表。我真的不喜欢检查基于User-Agent的支持，特别是因为它可能是欺骗性的。我还听说过至少一个下面列表不正确的情况（如下所示）。

是Internet Explorer吗？
是WebKit吗？ （但我读过移动版Safari不支持它）
是Opera吗？
Gecko和版本＆gt; = 1.9？ （表示Firefox 3或更高版本）

是否有更好的方法可以直接通过JavaScript测试支持，或者这是测试支持的唯一方法？

Answer 1

var canEditContent= 'contentEditable' in document.body;

Answer 2

检查某个功能的最佳方法是在您知道应该支持的元素上实际测试该功能，如下所示：

if(element.contentEditable != null)
    // then it's supported

或

if(typeof(element.contentEditable) != 'undefined')
   // same thing.. but with typeof you can be more specific about the type of property you need to find

Answer 3

我想出的最佳解决方案（与您的相似）如下所示。它可能不是防弹的，但涵盖了大多数情况：

var ua = navigator.userAgent;
var android_version = ua.match(/Android ([0-9\.]+)/);
var div = document.createElement("DIV");

if( typeof(div.contentEditable) == 'undefined' ||
  (/(iPhone|iPod|iPad)/i.test(ua) && /OS [1-4]_\d like Mac OS X/i.test(ua)) ||
  (android_version!=null && parseFloat(android_version[1])<3 ) ||
  (/(Opera Mobi)/i.test(ua))
) {
  // doesn't support contenteditable
} else {
  // supports contenteditable
}

您可以在this jsFiddle中进行测试。

注意：根据您的需求和目的，您可能还需要检测IE版本，因为它支持contenteditable是......“不理想”:-)大多数的痛苦是由超级库Rangy.js处理的

Answer 4

bobince的答案大部分都有效，但正如前面所说，你需要用户代理嗅探以排除那些没有启动软件键盘的iOS和Android版本。我现在正在使用这样的东西：

function isContentEditable() {
    var canEditContent = 'contentEditable' in document.body;
    if (canEditContent) {
        var webkit = navigator.userAgent.match(/(?:iPad|iPhone|Android).* AppleWebKit\/([^ ]+)/);
        if (webkit && parseInt(webkit[1]) < 534) {
            return false;
        }
    }
    return canEditContent;
}

这应该可以阻止较旧的iOS和Android设备返回true。它仍有一个问题：物理键盘。例如，如果设备运行Android 2.3但具有物理键盘，则用户将能够使用contentEditable，但此函数将返回false。物理键盘很少见。

更常见的是，在某些设备上，用户可以通过按住菜单按钮来调出屏幕键盘。显然，这不是您希望用户了解的内容。

您可以通过某种方式让用户手动覆盖检测脚本的嗅探部分来轻微缓解这些问题。您可以通过向“if（canEditContent）”添加覆盖检查在isContentEditable函数中实现此功能。但是，为此实现UI可能会带来更多挑战;）。

如何通过JavaScript检测对contentEditable的支持？

4 个答案: