11

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 ?

Frodik
  • 14,986
  • 23
  • 90
  • 141

2 Answers2

14

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).

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • 1
    nice answer, pretty much what I do, cept I one-line it. Just wanted to find an answer to give ya props on. I made a [plugin](http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active/16043687#16043687) inspired by your answer on [window focus](http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active/) and have been looking to find a way to give ya props since and keep forgetting, till now. lol. I love your answers, one of my favs to follow, keep up the good work! – SpYk3HH Aug 22 '13 at 14:06
11

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.

AlfonsoML
  • 12,634
  • 2
  • 46
  • 53
  • Thanks for informative answer. Could you please also supply some JS code if possible how to detect if the browser supports "plaintext-only" or possibly "plaintext" values in contenteditable ? What a mess with HTML5 again :-( – Frodik May 20 '12 at 09:58
  • 2
    The mess is Webkit by implementing things outside of the standards like IE used to do. In this case it seems that it's possible to do feature detection as the rest of browsers throw when an invalid value is used, and also the value is normalized to lower case: http://jsfiddle.net/e9t2d/1/ But remember: as this is something outside of any spec, it can change at any time and you won't notice it until it's too late. – AlfonsoML May 20 '12 at 11:07
  • Please update your answer with the fiddle code so I can accept it, thanks. – Frodik May 20 '12 at 11:09