Disable Ability to Highlight Text Within a DIV

Dear All,

I'm looking for a way so that the text within a <div>My Text</div> cannot be highlighted by the user.

Anyone any ideas?

Thanks,

Ben.
LVL 2
webtechyAsked:
Who is Participating?
 
dorwardConnect With a Mentor Commented:
You won't find that attribute in HTML <http://w3.org/TR/html4/>, and it will only work in MSIE. Other browsers will ignore it.
0
 
dorwardCommented:
It certainly isn't possible with CSS.

And it can't be done reliably using anything else. There might be unreliable javascript solutions out there.

Why do you want to do this? It sounds very annoying.
0
 
seanpowellCommented:
Well, you can do it with CSS, using positioning, z-index, and a transparent gif.

<html>
<head>
<title></title>
<style type="text/css">

div#over      { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; background-image: url("clear.gif"); }
div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; }

</style>
</head>

<body>
<div id="over"></div>
<div id="noselect">MyText</div>
</body>
</html>
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
dorwardCommented:
Oh dear, me. Yuck indeed. However, I don't think it will stop a user hitting Ctrl+A
0
 
webtechyAuthor Commented:
I actually found the following:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/unselectable.asp?frame=true

Thought you might be able to do it with CSS ...
0
 
seanpowellCommented:
I was thinking about that - but it appears to be IE only, so I thought the z-index would be a better way...

2 things - this should be "-1":

div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:-1; }

And yes, Ctrl - A will still select the text :-)


0
 
dorwardCommented:
Its a really bad idea to use z-indexes of 0 or less, some browsers position elements out of sight behind the body!
0
 
seanpowellCommented:
I wasn't aware of that...
Do you know which one's for future reference?
0
 
seanpowellCommented:
The following will do just as well then...

div#over      { position:absolute; top:0; left:0; width:100px; height:30px; z-index:2; background-image: url("clear.gif"); }
div#noselect { position:absolute; top:0; left:0; width:100px; height:30px; z-index:1; }
0
 
dorwardCommented:
Not off the top of my head - the problem is easily avoided so I don't need to remember where it shows up :)
0
 
seanpowellCommented:
Good one :-)
0
 
DaydreamsConnect With a Mentor Commented:
This will work in IE and Mozilla. Just add to <head> of document, but it will make the text unselectable for the whole page:

<script language="JavaScript1.2">
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
0
 
DaydreamsConnect With a Mentor Commented:
You may disable select  with this method (IE only):

<div onselectstart="return false">You can't select this text</div>

..it's quirky, though. If it adjacent to any other element it may be selectable.
0
 
DaydreamsConnect With a Mentor Commented:
If you use the above for the entire page, your text won't be selectable (IE):

<body onselectstart="return false">
0
 
WitchazelConnect With a Mentor Commented:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/unselectable.asp

<div UNSELECTABLE="on">My Text</div>

think this is ie only tho :)

-w
0
 
DaydreamsCommented:
>> If you use the above for the entire page, your text won't be selectable (IE):

I meant if you you use this (as an alternative to the script above) all text will be unselectable in the body:

<body onselectstart="return false">
0
 
JavaHead_JonnieCommented:
how about <div onselectstart="return false">Text</div>?
0
 
JavaHead_JonnieConnect With a Mentor Commented:
actually,
<div onselectstart="return false" unselectable="on">Text</div>
might be better...
0
 
DaydreamsCommented:
Hi webtechy,

Thanks for accepting my answer as assisting in your question, but why the B grade?

Please see more about grading here:

http://www.experts-exchange.com/Web/Web_Languages/CSS/help.jsp#hi73

An answer that says, "it can't be done, or it can be done, with some limitations", is an acceptable answer. If you would like to change the grade to an A, please post here, and I can have moderator change it for you.
0
 
JavaHead_JonnieCommented:
thanks for clearing that up netminder
0
 
DaydreamsCommented:
Thanks Netminder
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.