Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Enabling blocked text selection using JavaScript

Tags:

javascript

css

I recently came across a website that disabled text selection, preventing anyone from easily copying and pasting text. I have a bookmarklet that disables similar attempts to block context menus using JavaScript, and I'm wondering if it would be possible to do something similar for text selection.

function disableSelection(target){ if (typeof target.onselectstart!="undefined") //For IE     target.onselectstart=function(){return false} else if (typeof target.style.MozUserSelect!="undefined") //For Firefox     target.style.MozUserSelect="none" else //All other route (For Opera)     target.onmousedown=function(){return false} target.style.cursor = "default" } 

Elsewhere the function is called with disableSelection(document.body).

The solution from my context menu bookmarklet is also probably necessary:

javascript:void(document.onmousedown=null); void(document.onclick=null); void(document.oncontextmenu=null) 

Finally, I had seen elsewhere on StackOverflow that CSS could also be used:

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

Is there a method to fight all of these at once and end this tyranny over my browser? How would I both enable MozUserSelect/SelectStart for all elements and set the CSS properties?

like image 915
Patrick Avatar asked Aug 18 '11 03:08

Patrick


People also ask

How do you block text selection?

For a quick a glimpse of what you can do, just click anywhere in the middle of some text, hold down the [Alt] key, and make a small circle with your mouse. By using the [Alt] key while dragging your mouse, you can customize the shape and size of the selected block of text—it's up to you, not Word!

How do I block text selection in HTML?

You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.


1 Answers

Check out the Enable All Text Selection bookmarklet by Alan Hogan. The only issue with the bookmarklet is that it does not handle frames/iframes (that's a browser security thing so it's unlikely something can be done about it).

As an added bonus, it also enables the mouse right-click event on pages that block it.

Create a bookmark (e.g. by dragging the icon to the left of the URL for any page to your bookmarks bar), right-click and select Edit, rename to something meaningful, and insert the following code in the URL field:

javascript:(function(){function%20allowTextSelection(){window.console&&console.log('allowTextSelection');var%20style=document.createElement('style');style.type='text/css';style.innerHTML='*,p,div{user-select:text%20!important;-moz-user-select:text%20!important;-webkit-user-select:text%20!important;}';document.head.appendChild(style);var%20elArray=document.body.getElementsByTagName('*');for(var%20i=0;i<elArray.length;i++){var%20el=elArray[i];el.onselectstart=el.ondragstart=el.ondrag=el.oncontextmenu=el.onmousedown=el.onmouseup=function(){return%20true};if(el%20instanceof%20HTMLInputElement&&['text','password','email','number','tel','url'].indexOf(el.type.toLowerCase())>-1){el.removeAttribute('disabled');el.onkeydown=el.onkeyup=function(){return%20true};}}}allowTextSelection();})(); 

To make the bookmarklet code readable you can use the Bookmarkelt Builder at http://subsimple.com/bookmarklets/jsbuilder.htm - just paste the minified bookmarklet text and click the Format button.

like image 190
5 revs Avatar answered Oct 03 '22 15:10

5 revs