Dynamic Drive DHTML Scripts- Disable Select Text script

New Revised CSS Library Forums Web Tools

Disable Text Selection script

Author: Dynamic Drive

Note: Script rewritten Dec 28th, 06.

Description: This is a simple script that lets you disable text selection (the ability to drag and select text) within any element on your page, such as a certain paragraph. Script works in IE, Firefox, and Opera.

Demo: Try selecting text within the above paragraph- it's disabled.

Directions: Add this script to the HEAD section of your page:

Select All
<script type="text/javascript"> /*********************************************** * Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ function disableSelection(target){ if (typeof target.onselectstart!="undefined") //IE route target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //Firefox route target.style.MozUserSelect="none" else //All other route (ie: Opera) target.onmousedown=function(){return false} target.style.cursor = "default" } //Sample usages //disableSelection(document.body) //Disable text selection on entire body //disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv" </script>

With the script installed, just call the function disableSelection(target) at the very end of the document with a reference to the element you wish to disable text within. A few examples:

<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script>

<script type="text/javascript">
var somediv=document.getElementById("mydiv")
disableSelection(somediv) //disable text selection within DIV with id="mydiv"
</script>

<script type="text/javascript">
var alltables=document.getElementsByTagName("table")
for (var i=0; i<alltables.length; i++)
disableSelection(alltables[i]) //disable text selection within all tables on the page
</script>

Make sure to call the above functions at the end of the document to ensure the element in which to disable text for is defined before the function is called.