检测浏览器是否支持 contentEditable？答案

【问题标题】：Detect if browser supports contentEditable?检测浏览器是否支持 contentEditable？
【发布时间】：2011-12-12 04:34:33
【问题描述】：

有this question，但发布的解决方案是浏览器嗅探，我试图避免。

我需要使我的网站与 iPad 以及可能更新的 Android 兼容。我一直在为我的所见即所得编辑器使用旧版本的 FCKEditor（现在是 CK 编辑器），但这在移动设备上不起作用，所以我想将它换成带有 markdown 之类的简单文本区域，如果它不受支持.

据说它不会起作用，因为移动设备往往不支持这个contentEditable属性，这意味着当你点击它时屏幕键盘不会弹出。

如何检测浏览器是否支持contentEditable？有人建议我只用mydiv.contentElement === undefined 或类似的东西检查有问题的 div，但 div（如果它正在使用的话）都内置在 FCK 编辑器中并埋在 iframe 的某个地方。

难道没有其他方法可以检测浏览器是否支持contentEditable？

刚刚试过这个：

var contentEditableSupport = typeof $('<div contenteditable="true">')[0].contentEditable !== 'undefined';

在我的 iPad 上说“真的”……我认为不应该。

编辑：它返回“字符串”，因为所有属性都是字符串......它只是读取属性。我该怎么做呢？

【问题讨论】：

我不确定这是否有帮助（这里没有可供测试的 iOS），但 $('<div/>')[0].contentEditable 的默认值是 inherit。 iOS 显示了什么？
@fudgey：周一必须检查...我实际上没有 iPad。只需要一个在工作中。
@fudgey：无法检查...转移到其他事情上。无法使用 iPad。

标签： javascript jquery contenteditable

【解决方案1】：

您可以创建一个匿名的可编辑 div，检查它的 contentEditable，然后删除该 div。

【讨论】：

Modernizr 的类似方法（只有 Modernizr 不检测可编辑项）。

【解决方案2】：

这是我使用的测试，也是used in Modernizr。它会在 iOS 4（可能更早版本）中出现误报，但不幸的是，在这些环境中无法检测到。

var contentEditableSupport = "contentEditable" in document.documentElement;

【讨论】：

我会接受这个，因为这是一个相当知名的框架。谢谢。
@Mark：很公平，虽然知名框架远非万无一失。
好吧，如果我回头发现这个解决方案不起作用并找到更好的解决方案，我会偷走你的复选标记;)

【解决方案3】：

我能够通过检查contentEditable 属性的默认值而不是存在或类型来完成此操作。 W3 spec 表示 contentEditable 的缺失值默认值为“inherit”，但在旧版浏览器（例如 Android/Gingerbread）中，默认值为“false”。感谢 fudgey 对 OP 的评论为我指明了正确的方向！

这个测试对我有用：

var contentEditableSupport = $('<div/>')[0].contentEditable == 'inherit';

【讨论】：

【解决方案4】：

检查 execCommand

if (document.execCommand) {
    ... browser supports contentEditable
} else {
    ... browser doesn't support contentEditable    
}

【讨论】：

测试document.execCommand() 与测试contenteditable 不同。例如，Firefox 支持 document.execCommand() 多年，然后在版本 3 中添加 contenteditable 支持。一般来说，最好测试您感兴趣的实际功能。

【解决方案5】：

检查元素是否存在任何属性。你可以这样做

var element = document.createElement('__ELEMENT__');
if ('__PROPERTY__' in element ) {
    // property supported in the browser
}

或

if ('__PROPERTY__' in document.createElement('__ELEMENT__') ) {
    // property supported in the browser
}

以下链接包含所有内容。

【讨论】：