8

First, I have been here How to make HTML Text unselectable
But that doesn't solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?
Thanks

Community
  • 1
  • 1
ilyes kooli
  • 11,959
  • 14
  • 50
  • 79

4 Answers4

8

You can use CSS like this:

CSS

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}

For older IE versions, the issue usually is harder to deal with, but you can use a behavior:

CSS

.unselectable {
   behavior: url(ieUserSelectFix.htc);
}

and the behavior file "ieUserSelectFix.htc":

<public:component lightweight="true">

    <public:attach event="ondocumentready" onevent="stopSelection()" />

    <script type="text/javascript">
    <!--
        function stopSelection() {
            element.onselectstart = function() { return(false); };
            element.setAttribute('unselectable', 'on', 0);
        }
    //-->
    </script>
</public:component>

With Javascript you can:

yourElement.onselectstart = function() { return(false); };
Zuul
  • 16,217
  • 6
  • 61
  • 88
3

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.

Zuul
  • 16,217
  • 6
  • 61
  • 88
2

try something like this

                <!DOCTYPE html>
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Disable /Prevent Text Selection jQuery-JavaScript</title>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
                <script type="text/javascript">
                // Begin:
                // Jquery Function to Disable Text Selection
                (function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
                // EO Jquery Function

                // Usage
                // Load Jquery min .js ignore if already done so
                // $("element to disable text").disableTextSelect();
                // $("element to Enable text").enableTextSelect();
                //

                jQuery(function($) {
                $("body").disableTextSelect();

                $("#code").mouseover(function(){
                 $("body").enableTextSelect();
                });

                $("#code").mouseout(function(){  

                // Code for Deselect Text When Mouseout the Code Area
                if (window.getSelection) {
                  if (window.getSelection().empty) {  // Chrome
                    window.getSelection().empty();
                  } else if (window.getSelection().removeAllRanges) {  // Firefox
                    window.getSelection().removeAllRanges();
                  }
                } else if (document.selection) {  // IE?
                  document.selection.empty();
                }

                 $("body").disableTextSelect();
                });
                });
                </script>

                <style type="text/css">
                <!--
                body {
                 margin-left: 10px;
                 margin-top: 10px;
                }

                #code
                {
                 padding:20px;
                 border:2px dashed #CCC;
                 font-family:"Courier New", Courier, monospace;
                 font-size:15px;
                 background-color:#EEE;
                }
                -->
                </style>
                </head>

                <body>
                <h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
                <p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
                <p id="code">
                $(".elementsToDisableSelectFor").disableTextSelect();</p>
                <p>When you are leaving above code box selection was deselected! If selected !</p>
                </body>
                </html>

check jsfiddle output:

http://jsfiddle.net/bHafB/

EDIT: This is a cross-browser method for preventing text selection using an unselectable="on" element attribute.

      <!DOCTYPE html>
        <html>
          <head>
            <title>Unselectable Text</title>
            <style type="text/css">
            [unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
            </style>
          </head>
          <body id="doc">
        <p unselectable="on">For example, the text in this paragraph
        cannot be selected.
        For example, the text in this paragraph
        cannot be selected
        For example, the text in this paragraph
        cannot be selected</p>
          </body>
           </html>
srini
  • 876
  • 3
  • 12
  • 23
1

Overlay full transparent text:

 <div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>
flodur
  • 11
  • 1