Detect if browser supports contentEditable?

Question

There's this question, but the solution posted is browser sniffing, which I'm trying to avoid.

I need to make my website compatible with the iPad and perhaps newer Androids. I've been using an old version of the FCKEditor (now CK Editor) for my WYSIWYG editors, but that doesn't work on mobile, so I want to swap it out for a simple textarea with something like markdown, if it's not supported.

Supposedly it won't work because mobile devices tend not to support this contentEditable property, which means the on-screen keyboard won't pop up when you click on it.

How can I detect if the browser supports contentEditable? It's been suggested that I just check the div in question with something like mydiv.contentElement === undefined or something like that, but the div (if it's using one) is all built into the FCK Editor and buried somewhere in an iframe.

Isn't there another way to detect if a browser supports contentEditable in general?

---

Just tried this:

var contentEditableSupport = typeof $('<div contenteditable="true">')[0].contentEditable !== 'undefined';

Says "true" on my iPad...... I don't think it should.

Edit: It's returning "string" because all attributes are strings.... it's just reading the attribute. How else am I supposed to do this?

Answer 1

You could create an anonymous editable div, check it for contentEditable, then remove the div.