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

Question

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

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

似乎没有其他浏览器支持这一点,它只是Chrome的专有价值.我想在我的项目中使用它.但是,我需要检测浏览器并找出是否支持"纯文本"设置.

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

所以我宁愿检测是否支持"仅纯文本"功能,而不仅仅是检测Chrome浏览器.

有人可以帮我吗？

Answer 1

它似乎只是一个webkit功能.该规范只允许"真","假"和"继承"作为属性可能值

已经提交了一个错误来添加对编辑规范的明文支持,但是有趣的是请求是"明文"而不是"纯文本".

编辑:此代码可用于检测支持.演示:

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'(supported/true)或'inherit'(不支持/ false).