How to detect if browser supports “plaintext-only” value in contenteditable parameter?

Question

I can't find any relevant information about "contenteditable" HTML5 parameter. I've found out, that Google Plus is using this for Chrome browsers:

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

It seems that no other browsers support this and it's only Chrome proprietary value. I want to use it in my project. However, I need to detect the browser and find out if supports "plaintext-only" setting.

Of course, I could detect only Chrome, but there might be other browsers that support it (I don't know about any at this moment) or other main stream browsers might start supporting this feature in future.

So I would rather detect if the "plaintext-only" functionality is supported than detecting just Chrome browser.

Anyone can help me on this ?

Answer 1

It seems to be a webkit-only feature. The spec only allows "true", "false" and "inherit" as possible values for the attribute

A bug has been filed to add support for plaintext to the editing spec, but it's funny that the request is for "plaintext" instead of "plaintext-only".

Edit: This code can be used to detect the support. Demo:

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

alert(supportsPlainText());

But remember that doing browser-specific pages it's what leaded us to the IE6 problem.

Answer 2

Here's an alternative if you prefer not to rely on catching exceptions to detect features:

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

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

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

This works because setting the value to the attribute instead of the property will not throw a SyntaxError exception if 'plaintext-only' is an invalid value, instead it will set the property value to the default, 'inherit'.

Getting the property after setting the attribute results in a lower-cased string, so setting the attribute value to 'PLAINTEXT-ONLY' will result in a property with the value 'plaintext-only' (supported/true) or 'inherit' (not supported/false).