CODEWITHSUNDEEP
javascripthtml
ArtemF
ArtemF

Reputation: 71

How can one make a webpage where text is not highlightable?

Example: http://www.snopes.com/business/genius/genius.asp

None of the text is highlightable - I've never seen something like this. Tried to look at the source code, but could not find, not did Google provide any answers.

I'm assuming it's a JS trick? The text is in the source code, so it's not an image. Actually nothing is highlightable on the page.

How is this done?

Upvotes: 7

Views: 2307

Answers (4)

Dr.Molle
Dr.Molle

Reputation: 117354

There are also ways that don't require JS,

-moz-user-select (or -khtml-user-select for safari/chrome)

For IE/opera the unselectable-attribute

Upvotes: 1

YXD
YXD

Reputation: 32521

Read the source code of the page you have linked to: 

<script type="text/javascript">
<!--
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
-->
</script>

In Chrome, entering document.onselectstart = function() {return false} into the Javascript console seems to do the trick.

But don't do it, it's infuriating.

Upvotes: 9

mVChr
mVChr

Reputation: 50205

It's this part of the page source:

function disableselect(e){
    if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
        return false
}

function reEnable(){
    return true
}

if (typeof document.onselectstart != "undefined")
    document.onselectstart = new Function ("return false");
else{
    document.onmousedown = disableselect;
    document.onmouseup = reEnable;
}

Upvotes: 0

IAmTimCorey
IAmTimCorey

Reputation: 16757

This is the script area where they disable the selection:

<script type="text/javascript">
<!--
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
-->
</script>

The document.onmousedown = disableselect is the key line.

Upvotes: 2

Related Questions