How do i make text unselectable

What is the best way to make displayed text in an <a> tag or a <td> tag unselectable?

Thanks
LVL 15
dave4dlAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pvginkelCommented:
Only works in IE:

<div unselectable="on">
foo bar foo bar foo bar foo bar<br />
foo bar foo bar foo bar foo bar<br />
foo bar foo bar foo bar foo bar<br />
</div>
0
dave4dlAuthor Commented:
Thanks for the response.

This doesn't work for my problem because it isn't scriptable and the html on my page is creating by client javascript using the DOM (and outerHTML is not writable for TD tags).

I tried surrounding my script-created elements with a div tag with unselectable=on but the property apparently didn't cascade to the child objects (or maybe it wasnt applied because the child objects were added after the document was loaded).

also, while not absolutely necessary, it would be better if there was a solution that works on other browsers.  This is less import than having it work on at least ONE browser though (the above solution doesn't work for my situation).

I should probably tell what my situation is (in addition to the first part of this message).  I've written some code to create a menu based on dynamic data (hence the html created with javascript) and I would like to set the menu so that users can't select it if they drag the mouse over it but they can still click on all the menu items and be taken to the appropriate page.

Thanks
0
pvginkelCommented:
That's where DHTML comes on. You can do this:

<div id="my-div">
foo bar foo bar foo bar foo bar<br />
foo bar foo bar foo bar foo bar<br />
foo bar foo bar foo bar foo bar<br />
</div>
<script>
document.getElementById('my-div').unselectable = 'on';
</script>

I've researched this and people come with lots of ideas in general, like onfocus="this.blur" and onstartselect="return(false)" but none of these seem to work. If I understand correctly you'll have to add this property to every element concerning for this to work. In other words: this doesn't propagate to child element. Though, I have found the following example in the MSN libraries. It isn't valid XHTML code and besides that, just ugly, but it'll work too. (Note the span that starts at the top and closes at the bottom).

<P>
<SPAN ID="oSpan" UNSELECTABLE="on" >This text cannot be selected.
<P>
<TEXTAREA WRAP="PHYSICAL" ROWS="5" STYLE="font-weight: bold;" ID="oTextarea">
This text can be selected and overwritten.
</TEXTAREA>
</P>
This text closes the SPAN and cannot be selected either.
</SPAN>
</P>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dave4dlAuthor Commented:
Thanks for your help!!

Sorry it took me so long to close this.
0
halldb02Commented:
Does not work for firefox
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.