Testing for contenteditable

[csdude55]

After all these years, do you guys know of a way to test if the browser recognizes contenteditable? Back in 2013 when I built it, my only option was browser sniffing... which kinda sucks.

As far as I can tell, most desktop browsers are fine with it, but mobile support is iffy.

[csdude55]

I'm not even quite sure about browser sniffing... this shows support for IE starting with version 11, but I have 9.0 on my PC and it works just fine:

[caniuse.com...]

[not2easy]

I was about to suggest visiting that place. It can help sort out what works. But as in this case I have wondered sometimes whether it gets re-test results when environments (such as updates to platform) might have changed.

[csdude55]

Further weirdness... they point to Github to update the information, but Github's info is totally different from theirs:

[github.com...]

I've learned that there is a Boolean property of:

document.getElementById("myText2").isContentEditable

But as far as I can tell it only tests whether the element is SET to contenteditable, not whether the browser supports it. I could be wrong, though... the documentation I'm finding is super vague.

[not2easy]

Curiosity sent me to wikipedia and they don't have an article for contenteditable but current usage of the function is discussed under their Online Rich Text Editor [en.wikipedia.org] article.

[csdude55]

As an alternative, is there any possibility of throwing in a quick script to test for whatever specific functionality you need, independent of browser version?

@Lucy24 (from a different thread), I was sorta-kinda thinking about...

(maybe in an Ajax script) Create a contenteditable element, then use JavaScript to add content to it, then measure the length of the element. If it's longer than 0 then the browser supports it, and I can add a cookie so that I won't have to test again.

Maybe?

[tangor]

Adding cookies? The excitement of GDPR has made a few of us think twice about that. :)

Note: Not necessarily humor, nor an attempt to change the subject. Just sayin'...

[csdude55]

Thoughts? I tested with Chrome and whatever the default browser on a Samsung S7 is, and so far so good.

I coded it in jQuery since I'm already using it, but it's not necessary:

<div id="testCE" contentEditable="true"></div>

<script>

if ($('#testCE').is("[contentEditable='true']"))
 $('#testCE').html('1');

if ($('#testCE').html() == '1')
 alert('compatible');

else
 alert('not compatible');

</script>

Using regular Javascript (untested):

<div id="testCE" contentEditable="true"></div>

<script>
var testCE = document.getElementById('testCE');

if (testCE.isContentEditable)
 testCE.innerHTML = '1';

if (testCE.innerHTML == '1')
 alert('compatible');

else
 alert('not compatible');

</script>

In the live version, I would set a cookie if html() == '1', and there wouldn't be an else.

Setting the <div id="testCE"> style to display: none still returns as compatible, so if that's the case then that makes it all more seamless... no need for an Ajax script, I could just do it on any page :-)

[csdude55]

Adding cookies? The excitement of GDPR has made a few of us think twice about that. :)

Didn't mean to ignore you, @tangor, I was merrily typing up my own reply :-)

I haven't really kept up with the GDPR too much since 98% of my traffic comes from the US (and the remainder are bots or scammers)... should I? Realistically, the user won't be able to submit anything on the site unless they're logged in, which also requires a cookie, so I don't know what the alternative would be.

[robzilla]

var contentEditableSupport = "contentEditable" in document.documentElement;

From [stackoverflow.com...]

[csdude55]

That's awesome, Rob, thanks!

I saw that they said it would throw a false positive for iOS 4 and maybe earlier, so I modified it a little:

<script>

var isOldMobile = contentEditableSupport = false;

isOldMobile = navigator.userAgent.match(/iPhone OS [432]/);

if (!isOldMobile)
contentEditableSupport = 'contentEditable' in document.documentElement;

alert(contentEditableSupport);

</script>

I don't have an old iOS to test with, so this is more of an educated guess.

I know you guys are going to say that iOS4 is so old that it doesn't matter, but in the last week I did have 2 users using iOS4 (one using 4.3.1 and the other using 4.3.5)... they're probably scammers, of course, but it's hard to be sure. I know my 70 year old dad stays on his phone like a teenager, but he never updates anything so he could easily be an example of someone using iOS4 (except that I have HIM on Android... I'm a good son).