How to detect if browser supports "plaintext-only" value in contenteditable parameter? How to detect if browser supports "plaintext-only" value in contenteditable parameter? google-chrome google-chrome

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


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.


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