Welcome to WebmasterWorld Guest from 3.227.208.153

Forum Moderators: phranque

Message Too Old, No Replies

Testing for contenteditable

     
8:09 pm on Jun 14, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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.
12:24 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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...]
1:52 am on June 15, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4556
votes: 362


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.
2:16 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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.
2:46 am on June 15, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4556
votes: 362


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.
3:14 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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?
7:19 am on June 15, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10557
votes: 1118


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'...
7:45 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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 :-)
7:54 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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.
10:45 am on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


var contentEditableSupport = "contentEditable" in document.documentElement;

From [stackoverflow.com...]
6:54 pm on June 15, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1203
votes: 119


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