View Single Post
Old 07-12-2011, 10:31 AM
  #2
Mandarin
Still retired
 
Mandarin's Avatar
 
Join Date: Jul 2009
Location: Michigan
Posts: 1,748
iTrader: (0)
Mandarin has a spectacular aura aboutMandarin has a spectacular aura aboutMandarin has a spectacular aura about
In Firefox and Webkit you can set the CSS properties -moz-user-select and -webkit-user-select to none. This will restrict users from selecting text with the mouse or with CTRL-A, assuming there's no override in the user stylesheet.

Code:
<style>
body {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
</style>
Internet Explorer and Opera only support the inferior, proprietary HTML attribute unselectable. When given a value of "on" these browsers don't allow the user to select text with the mouse, though CTRL-A will still select all inline content in the page. Additionally, the attribute isn't inherited, which means that you have to include it with every single element which you want to restrict. Make special note of paragraph four in the example below.

HTML Code:
<body>
	<p unselectable="on">Lorem ipsum...</p>
	<p unselectable="on">Dolor sit amet...</p>
	<p unselectable="on">Consectetur adipisicing elit...</p>
	<p unselectable="on">This can't be selected <i>(but this can)</i>.</p>
</body>
Internet Explorer and Webkit also respond to the onselectstart event. If you cancel the default action on this event, text selection with the mouse won't work. CTRL-A will still work, but at least this can be attached to the body element and not every single child like the previous method requires.

Code:
<script>
window.onload = function() {
	document.body.onselectstart = function() {
		return false;
	}
}
</script>

Further reading:
-moz-user-select property | -webkit-user-select property
Mandarin is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
 
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.