Solved

Disable Ability to Highlight Text Within a DIV

Posted on 2004-04-02
22
1,353 Views
Last Modified: 2012-06-22
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.
0
Comment
Question by:webtechy
  • 6
  • 5
  • 5
  • +3
22 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 10739332
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740451
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
 
LVL 17

Expert Comment

by:dorward
ID: 10740463
Oh dear, me. Yuck indeed. However, I don't think it will stop a user hitting Ctrl+A
0
 
LVL 2

Author Comment

by:webtechy
ID: 10740484
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
 
LVL 17

Accepted Solution

by:
dorward earned 0 total points
ID: 10740516
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740529
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
 
LVL 17

Expert Comment

by:dorward
ID: 10740536
Its a really bad idea to use z-indexes of 0 or less, some browsers position elements out of sight behind the body!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740558
I wasn't aware of that...
Do you know which one's for future reference?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10740561
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
 
LVL 17

Expert Comment

by:dorward
ID: 10740600
Not off the top of my head - the problem is easily avoided so I don't need to remember where it shows up :)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 31

Expert Comment

by:seanpowell
ID: 10740637
Good one :-)
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 75 total points
ID: 10741735
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
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 75 total points
ID: 10743557
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
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 75 total points
ID: 10743574
If you use the above for the entire page, your text won't be selectable (IE):

<body onselectstart="return false">
0
 
LVL 1

Assisted Solution

by:Witchazel
Witchazel earned 25 total points
ID: 10785983

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
 
LVL 15

Expert Comment

by:Daydreams
ID: 10786166
>> 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
 

Expert Comment

by:JavaHead_Jonnie
ID: 10800486
how about <div onselectstart="return false">Text</div>?
0
 

Assisted Solution

by:JavaHead_Jonnie
JavaHead_Jonnie earned 25 total points
ID: 10800493
actually,
<div onselectstart="return false" unselectable="on">Text</div>
might be better...
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10800645
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
 

Expert Comment

by:JavaHead_Jonnie
ID: 10821087
thanks for clearing that up netminder
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10824085
Thanks Netminder
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now