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

There's a website (example) that somehow blocks selecting text. Also it blocks Ctrl+A to select everything, there is also no “Copy” in the popup menu.

What I have tried:

Some sites use JavaScript to block selection. So I disabled all JavaScript sources in no-script addon in Firefox. I tried the same site in Google Chrome with the Script Safe addon. Made sure that everything is blocked, still can’t select text. Mousepointer remains an arrow and not a text cursor also on the whole site.

Used about:config to disable JavaScript completely in Firefox. Still no effect.

I read that some sites use DIVs with the style display:block so I used Inspect to examine the styles of the site. There is not one mention of "block" on the whole website, not in embedded CSS nor in object style=-attributes.

The text is not an image or flash or some HTML5 canvas ect. Everything is within DIV and P tags but no style was found that might block the text selection.

How can the website still block any selection of text? Not to mention why browsers support such behaviours at all. I just want to use a selected word or sentence and want to search google for it using right mouse click. 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.

Solution 1:

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!

Solution 2:

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.

Solution 3:

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;

Solution 4:

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