Question

我找不到任何关于“contenteditable”HTML5参数的相关信息。我发现Google Plus正在将其用于Chrome浏览器：

<div contenteditable="plaintext-only"></div>

似乎没有其他浏览器支持此功能，而且它只是Chrome专有价值。我想在我的项目中使用它。但是，我需要检测浏览器并找出是否支持“仅纯文本”设置。

当然，我只能检测到Chrome，但可能还有其他支持它的浏览器（目前我还不知道）或其他主流浏览器可能会在将来开始支持此功能。

所以我宁愿检测是否支持“仅纯文本”功能，而不仅仅是检测Chrome浏览器。

任何人都可以帮助我吗？

Answer 1

它似乎是webkit-only功能。 spec仅允许“true”，“false”和“inherit”作为属性的可能值

已经提交了一个bug来为编辑规范添加对明文的支持，但是有趣的是请求是针对“明文”而不是“纯文本”。

编辑：此代码可用于检测支持。 Demo：

function supportsPlainText()
{
    var d = document.createElement("div");
    try {
        d.contentEditable="PLAINtext-onLY";
    } catch(e) {
        return false;
    }
    return d.contentEditable=="plaintext-only";
}

alert(supportsPlainText());

但请记住，做浏览器特定的页面是导致IE6问题的原因。

Answer 2

如果您不想依赖捕获异常来检测功能，那么这是另一种选择：

function supportsPlaintextEditables () {
    var div = document.createElement('div');
    div.setAttribute('contenteditable', 'PLAINTEXT-ONLY');

    return div.contentEditable === 'plaintext-only';
}

console.log(supportsPlaintextEditables);
//-> true/false

这是有效的，因为如果'plaintext-only'是无效值，则将值设置为属性而不是属性将不会抛出SyntaxError异常，而是将属性值设置为默认值'inherit'。

设置属性后获取属性会产生一个较低的字符串，因此将属性值设置为'PLAINTEXT-ONLY'将导致属性值为'plaintext-only'（支持/ true）或{{ 1}}（不支持/ false）。

如何检测浏览器是否支持contenteditable参数中的“纯文本”值？

2 个答案: