检测浏览器是否支持contentEditable？

有这个问题 ，但发布的解决方案是浏览器嗅探，我试图避免。

我需要让我的网站与iPad以及更新的Androids兼容。 我一直在为我的WYSIWYG编辑器使用旧版本的FCKEditor（现在的CK编辑器），但是这不适用于移动设备，所以我想将它换成简单的textarea，如markdown，如果不支持的话。

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

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

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

---

试过这个：

 var contentEditableSupport = typeof $('
')[0].contentEditable !== 'undefined'; 

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

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

Answer 1

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

 var contentEditableSupport = "contentEditable" in document.documentElement; 

Answer 2

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

Answer 3

我能够通过检查contentEditable属性的默认值而不是presence或类型来实现此目的。 W3规范指出contentEditable缺省值默认值是“inherit”，但在旧版浏览器（例如Android / Gingerbread）中，默认值为“false”。 感谢对OP的评论的愚蠢，这使我指出了正确的方向！

这个测试对我有用：

 var contentEditableSupport = $('
')[0].contentEditable == 'inherit'; 

Answer 4

检查execCommand

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

Answer 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 } 

以下链接包含所有内容。

1. https://github.com/Modernizr/Modernizr/issues/570
2. http://diveintohtml5.info/everything.html#contenteditable