Unselectable Text

There are many methods and options to make text unselectable on a website, but not all of them work on the major browsers. Below please find different source code to help you achieve this.

If you combine all the below source codes together in the same html/asp/aspx form, you’ll get all their functionality on the same page, thus no one can select any text from your website from the following browsers:

  • Internet Explorer 7
  • Firefox 3.0.4
  • Google Chrome 0.4.x
  • Opera 9.62

Source Code 1 – Unselectable

var Unselectable = {

enable : function(e) {
var e = e ? e : window.event;

if (e.button != 1) {
if (e.target) {
var targer = e.target;
} else if (e.srcElement) {
var targer = e.srcElement;
}

var targetTag = targer.tagName.toLowerCase();
if ((targetTag != “input”) && (targetTag != “textarea”)) {
return false;
}
}
},

disable : function () {
return true;
}

}

if (typeof(document.onselectstart) != “undefined”) {
document.onselectstart = Unselectable.enable;
} else {
document.onmousedown = Unselectable.enable;
document.onmouseup = Unselectable.disable;
}

You need to insert this in the <head> section of the html form in the following form:

<

 

script type=”text/javascript”>

 

….enter source code here…

 

</script>

This source code is from webtoolkit.info. This code will disable text selection by mouse dragging. This was tested and worked on the following browsers:

  • Internet Explorer 7
  • Firefox 3.0.4
  • Google Chrome 0.4.x
  • Opera 9.62

 This code will also disable text selection by the ctrl+a keys combination but only works in IE7.

Source Code 2: OnLoad

This is very simple and it disables text selection by mouse dragging.

  1. <script type=”text/javascript”>
  2. window.onload =
  3. function()

  4. {
  5.      document.onselectstart =
  • function() {return false;} // ie
  •      //document.onmousedown = function() {return false;} // mozilla
  •      document.style.MozUserSelect =
  • “none”;

  •      document.oncontextmenu =
  • function() {return false;}

  • }
  • </script>
  •  

    You need to just insert this source code in the body tag. This works for the following browsers:

    • Internet Explorer 7 (also disables ctrl+a)
    • Google Chrome 0.4.x

     This also disables the ctrl+a key combination from Internet Explorer 7.

    Source Code 3: Disable Ctrl Key Combination

        function disableCtrlKeyCombination(e)
        {
            //list all CTRL + key combinations you want to disable
            var forbiddenKeys = new Array(“a”, “n”, “c”, “x”, “v”, “j”);
            var key;
            var isCtrl;

            if(window.event)
            {
                key = window.event.keyCode;  //IE
                if(window.event.ctrlKey) isCtrl = true;
                else isCtrl = false;
            }
            else
            {
                key = e.which;  //firefox
                if(e.ctrlKey) isCtrl = true;
                else isCtrl = false;
            }

            //if ctrl is pressed check if other key is in forbidenKeys array
            if(isCtrl)
            {
                for(i=0; i<forbiddenKeys.length; i++)
                {
                    //case-insensitive comparation
                    if(forbiddenKeys[i].toLowerCase() == String.fromCharCode(key).toLowerCase())
                    {
                        //alert(“Key combination CTRL + ” +String.fromCharCode(key)+ ” has been disabled.”);
                        return false;
                    }
                }
            }
            return true;
        }

    This source code will disable the CTRL+A key combination in the following browsers:

    • Internet Explorer 7
    • Firefox 3.0.4
    • Google Chrome 0.4.x
    • Opera 9.62

    In IE7 and Opera it only works when your mouse is over the website. If you move your mouse outside of the website (in the blank space), the CTRL+A will still work. To disable everything, you’ll have to use this method in conjunction with the OnLoad source code.

    Hope I have helped many people… if you need anything else, just let me know. Happy Disabling! 😉

     

     Resources:

    Advertisements

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: