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

【问题标题】：How do I detect support for contentEditable via JavaScript?如何通过 JavaScript 检测对 contentEditable 的支持？
【发布时间】：2010-12-25 07:54:13
【问题描述】：

我已经搜索了几天了，到目前为止，我能想到的最好的办法就是检查下面的列表。我真的不喜欢检查基于 User-Agent 的支持，特别是因为它可以被欺骗。我还听说过至少一个例子，下面的列表是不正确的（如下所述）。

是 Internet Explorer 吗？
是 WebKit 吗？ （但我听说移动版 Safari 不支持）
是歌剧吗？
Gecko 和版本是否 >= 1.9？ （意味着 Firefox 3 或更高版本）

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

【问题讨论】：

标签： javascript html cross-browser contenteditable

【解决方案1】：

var canEditContent= 'contentEditable' in document.body;

【讨论】：

这会在 iOS 4（及更早版本）上产生误报。
它也会在 Android 浏览器上产生误报。
据我了解，这不是误报。内容是可编辑的，只是系统没有提供编辑它的方法。（iOS4 和 Android 的问题仍然存在，但解决方案非常适合所提出的问题。）
@MathiasBynens 是的，但我知道没有测试可以在不嗅探的情况下消除 iOS

【解决方案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

【讨论】：

我不知道我是怎么错过看到那个属性的。
typeof 是一个运算符，而不是一个函数，因此不需要在操作数周围加上括号。
这很好用，但对于希望在 iPhone/iPad 上实现这一点的人来说：定义了 contentEditable 属性。问题是操作系统实际上并不支持它，即没有调出屏幕键盘让您输入任何内容。我现在看到的唯一方法是正则表达式 UserAgent 以获取与 iOS 相关的任何内容。
正如@mitjak 所说，这在 iOS 4（及更早版本）上会产生误报。

【解决方案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 解决了大部分问题.

【讨论】：

【解决方案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 可能会带来更多挑战；）。

【讨论】：