How to Make Text Unselectable on an HTML Page

How to make HTML Text unselectable

You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.

If you're targeting decent browsers only, then just make use of CSS3:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<label class="unselectable">Unselectable label</label>

If you'd like to cover older browsers as well, then consider this JavaScript fallback:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

If you're already using jQuery, then here's another example which adds a new function disableSelection() to jQuery so that you can use it anywhere in your jQuery code:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

Is there a way to make text unselectable on an HTML page?

In most browsers, this can be achieved using CSS:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

For IE < 10 and Opera, you will need to use the unselectable attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

make html text unselectable

After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:

Your Fiddle updated here!

Example:

CSS

.wrapTxt {
  position: relative;
}
.wrapTxt .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML

<p class="wrapTxt">
  This is my text! My text is mine and no one Else's!
  <span class="mask"></span>
</p>

The principle here is simple (Fiddle), have a block element over the text, occupying all of it's wrapper space.

The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the "not selectable" text will not me available.

Final note:

The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.

How to make HTML Text unselectable for inputs

I was able to achieve this by using a JS approach
It looks kinda dirty, but it will work for now. I will refactor it in a few days, but if someone wants to see the answer:

var digitalCodeElement = this.elementRef.nativeElement.querySelector('.digital-code');
      digitalCodeElement.addEventListener('contextmenu', e => e.preventDefault());
      digitalCodeElement.addEventListener('copy', e => e.preventDefault());
      digitalCodeElement.addEventListener('paste', e => e.preventDefault());
      digitalCodeElement.addEventListener('cut', e => e.preventDefault());

How to make certain text not selectable with CSS

The CSS below stops users from being able to select text.

-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

To target IE9 downwards the html attribute unselectable must be used instead:

<p unselectable="on">Test Text</p>

Text unselectable in IE

In IE8 there are two ways to make an element unselectable:

1.) myElement.unselectable = "on"; // Does not work on body elements

2.) myElement.onselectstart = function (){ return false; }

Once an element is unselectable, users cannot select from within that element.
However, they are still able to select either the text or the box of the element
by dragging into it from within another element which is not unselectable.

I have tried to work around this by cancelling various events on myElement (ondragenter, oncontrolselect, onmouseenter, onselectionchange...), it didn't work.

All this applies only to IE8

Making text unselectable

It varies per browser. These CSS properties will target WebKit and Gecko-based browsers, as well as any future browsers that support user-select:

user-select: none;
-webkit-user-select: none;
-moz-user-select: none;

Make text unselectable and uncopyable (webkit, while surrounded by copyable text)

More a workaround: you can exploit fact, that CSS generated content is invisible for clipboard (*), so with empty span with text moved to some attribute you have visually similar result with requested clibpoard behaviour:

[data-text] {  color: orange;}[data-text]::after {  content: attr(data-text);}

<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>

Unselectable text in HTML on iOS

The computed height of #div8 is 0. Changing this to 100% fixes the issue for me.