The Computer Oracle

How do websites block selecting text and how do I unblock that?

--------------------------------------------------
Rise to the top 3% as a developer or hire one of them at Toptal: https://topt.al/25cXVn
--------------------------------------------------

Music by Eric Matyas
https://www.soundimage.org
Track title: Future Grid Looping

--

Chapters
00:00 How Do Websites Block Selecting Text And How Do I Unblock That?
01:17 Accepted Answer Score 104
02:32 Answer 2 Score 39
03:16 Answer 3 Score 16
03:36 Answer 4 Score 17
03:43 Thank you

--

Full question
https://superuser.com/questions/1282718/...

--

Content licensed under CC BY-SA
https://meta.stackexchange.com/help/lice...

--

Tags
#googlechrome #firefox #browser #javascript

#avk47



ACCEPTED ANSWER

Score 104


https://www.angst-panik-hilfe.de/angst-panik.css shows:

body{-webkit-user-select:none;-moz-user-select:-moz-none;
-ms-user-select:none;user-select:none}

So, that effect applies to the entire BODY tag.

Documentation on this CSS: Mozilla Developer Site: user-select.

You could probably override this by removing the style in Developer Tools (press F12 in Firefox or Chrome) - you may even be able to create a JavaScript applet that, after investing the time to set this up, can remove that style with less instant effort on your part (which may be a time saver if you plan to visit the site multiple times).

I'd also like to add this note: This might not be the only way to have at least some of that effect. Another possible way could be to have an invisible DIV cover the DIV that has the text. That way, the mouse cursor would not turn into the I-beam (text cursor) because the cursor would be based on the content of the top-most DIV. (Ctrl-A would probably cover that text, though.)

It's pretty annoying when a website does such things and forces me to type technical terms and names into google by hand. It disturbs my workflow.

Amen! Upon seeing this, I'm disappointed at the existence of such a CSS style being implemented by the major browsers. Such things are pretty annoying, indeed!




ANSWER 2

Score 39


As has already been stated, setting user-select: none in the page's CSS is what disables selection of text on a page. The easiest way to remove that text selection block would be through a user script like the following that overrides the setting:

// ==UserScript==
// @name         Force Select
// @version      1.0
// @description  Stop sites from disabling selection of text
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  let style = document.createElement('style');
  style.innerHTML = '*{ user-select: auto !important; }';

  document.body.appendChild(style);
})();

Note: This will apply to every page if left enabled, which might not be desirable in all situations.

The script can be installed and easily toggled on/off with a user script manager such as Violentmonkey, Tampermonkey, or Greasemonkey.




ANSWER 3

Score 17


You can hit Ctrl + P and grab what you need from the print preview.

enter image description here




ANSWER 4

Score 16


Open the developer tools (F12), change to the Elements tab, and untick the following CSS rules under body:

  • user-select: none;
  • webkit-user-select: none;

Demo Image