• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7684
  • Last Modified:

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
0
dave4dl
Asked:
dave4dl
  • 2
  • 2
1 Solution
 
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
 
dave4dlAuthor Commented:
Thanks for your help!!

Sorry it took me so long to close this.
0
 
halldb02Commented:
Does not work for firefox
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now