We help IT Professionals succeed at work.

How do i make text unselectable

dave4dl
dave4dl asked
on
Medium Priority
7,798 Views
Last Modified: 2009-06-29
What is the best way to make displayed text in an <a> tag or a <td> tag unselectable?

Thanks
Comment
Watch Question

Commented:
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>
CERTIFIED EXPERT

Author

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
Commented:
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>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT

Author

Commented:
Thanks for your help!!

Sorry it took me so long to close this.

Commented:
Does not work for firefox
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.