All geek questions in one place

Make html text non-selectable

First, I was here. How to make HTML text unselected
But this does not solve my problem (the JavaScript version works well, but I need to do it using HTML and CSS, I can not use JavaScript ). I used the recommended CSS, but look at my DEMO drag mouse from [drag here] to [here], you will see that the text can still be selected.
any way to make it really inaccessible?
thanks

+6
source share
4 answers

After addressing this issue, recall another method so that the user cannot select text while viewing the page, basically by adjusting the mask over the target text:

Your violin is 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) , has a block element above the text, occupying all this shell space.

Falling is a complicated implementation if you need one line to select and the next not. In addition, links to the text "not selectable" will not be available to me.

Final Note:

The user can always get around this by looking at the source code or by dragging the mouse from top to bottom on the web page.

+3
source

You can use CSS as follows:

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 versions of IE, the problem is usually more complicated, but you can use the 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); };
+5
source

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 to prevent text selection using the unselectable = "on" 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>
+2
source

Full transparent text overlay:

  <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>
+1
source

Source: https://habr.com/ru/post/914916/

More articles:


All Articles