Question

有this question，但发布的解决方案是浏览器嗅探，我正在努力避免。

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

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

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

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

试过这个：

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

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

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

Answer 1

你可以创建一个匿名的可编辑div，检查它是否为contentEditable，然后删除div。

Answer 2

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

此测试对我有用：

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

Answer 3

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

var contentEditableSupport = "contentEditable" in document.documentElement;

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
}

以下链接包含所有内容。

检测浏览器是否支持contentEditable？

5 个答案: