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

Question

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.

score 107 · Accepted Answer · edited Jan 09 '18 at 02:23

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!

Herohtar · Answer 2 · 2018-01-08T15:16:31.863

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.

score 27 · Answer 3 · edited May 16 '22 at 15:10

The simplest way to solve this problem is by using a bookmarklet:

In your browser create a new bookmark.
Name it, for example, "Enable Selection" (without quotes), or however you like.
In the location textbox paste this code:

javascript:(function(){var style=document.createElement('style');
style.innerHTML='*{user-select: auto !important;} ::selection{background-color: blue !important; color: white !important}';
document.body.appendChild(style);
document.body.onselectstart=function(){return true};
document.body.onmousedown=function(){return true};
document.onkeydown=function(){return true};
})();

So whenever you want to enable text selection on some annoying web site, just click on this bookmark.

This code takes care of most frequent CSS and JavaScript-based ways that a-holes use to disable text selection on their web sites. Although some less frequent ways might require some additional adjustments to the code.

score 19 · Answer 4 · answered Jan 09 '18 at 19:17

19

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

answered Jan 09 '18 at 19:17

Oliver Salzburg

89,072
65
269
311

score 16 · Answer 5 · answered Jan 05 '18 at 16:44

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;

answered Jan 05 '18 at 16:44

JMK

3,381
10
52
72

Eric Duminil · Answer 6 · 2020-10-11T16:23:23.940

13

With Firefox, there's a really easy way:

View > Page Style > No Style

In German:

Ansicht > Webseiten-Stil > Kein Stil

It also works great to download embedded images on which right-click has been disabled.

edited Oct 11 '20 at 16:23

answered Jan 08 '18 at 09:04

Eric Duminil

228

score 6 · Answer 7 · edited Jan 07 '19 at 15:09

I'm using Stylus (https://add0n.com/stylus.html) and I made a style to apply to all websites, and thus I am ensuring everything is selectable:

* {
  -webkit-user-select: auto !important;
  -moz-user-select: inherit  !important;
  -ms-user-select: inherit  !important;
  user-select: auto  !important;
}

The asterisk is to make sure the style is not only applied to a certain css element (like <body>), but to all elements. I encountered cases where the selection blocking was applied to a button text only, so making a css for <body> would not help.

I use selection for instant translation on foreign language websites.

score 3 · Answer 8 · answered Jan 08 '18 at 09:56

As other answers have stated, its to do with the CSS on the body of the pages. Whilst you can edit this by hand every time, if you use this site a lot, I would suggest that if you use Chrome, you install the Stylish extension.

Stylish lets you create additional CSS to apply to pages. It can be used all over the web. It has the benefit of automatically applying whenever you visit the website (so you don't need to add it via the dev tools on every page load).

Once installed, click on the icon in the toolbar and select "Create New Style". It will automatically create the entry for the website you are currently visiting. You can then add any CSS you like to the page. But be warned: some styles may not be overriddable (especially if its written on the element itself, rather than a CSS class).

In this case, you can use the import function, and add the below code, this should allow you to select the text on the website you linked to.

@-moz-document domain("www.angst-panik-hilfe.de") {
  body {
    -webkit-user-select: auto !important;
    -moz-user-select: inherit  !important;
    -ms-user-select: inherit  !important;
    user-select: auto  !important;
  }
}

mvark · Answer 9 · 2018-01-06T14:38:26.720

I prefer using "bookmarklets" to user scripts or browser extensions. Try using one of the many bookmarklets to disable CSS & grab the required text

As it is may mess up the readability of web-page, I sometimes open the page in a different tab (right click on tab, select Duplicate) before removing the styling with the bookmarklet

You can also try the Google Mobilizer Bookmarklet to view just text of web pages

score 2 · Answer 10 · answered Mar 12 '19 at 11:21

2

Install the AddOn "Absolute Enable Right Click & Copy", that enables everything that the other No Script AddOns can not.

answered Mar 12 '19 at 11:21

Chris

21

score 1 · Answer 11 · answered Jan 11 '18 at 23:44

Several of the solutions proposed might be browser specific, so it's worth suggesting a few alternatives:

Use a broswer that respects you more.

a. Emacs has browsers emacs-w3m and eww that will always allow one to select text.

b. Other text-based browsers such as lynx, elinks, and w3m, might allow one to select text, but even if not, if running those programs in a terminal window, one can select text using one's mouse. And, if one is using those programs from within tmux, one can use tmux's ability to copy text even without a mouse.
Use a command line tool to download the entire url in a readable text format.

a. w3m -dump [your_url] > your_file.txt

b. lynx -dump [your_url] > your_file.txt. I usually prefer this one because it marks hyperlinks as readable footnotes!

agcala · Answer 12 · 2019-04-05T09:33:53.943

Just create the following css style:

html, body {
    user-select: text;
}

There is an extension called Stylish which allows you to install that (or any other) css code in any website of your choice. Just type in the above css code and tell which website[s] you want it to be applied to and you are good to go. This extension works on Chrome, Baidu, Firefox and Opera. If you happen to be on IE then you are out of luck. But you already know that don't you.

score 1 · Answer 13 · answered Jan 24 '20 at 13:24

Another possibility to deactivate the selection is to use the property onselectstart, as explained by Ismael Miguel:

Another way is to add onselectstart="return false;" to the body. Some other techniques (like, removing the selection with JavaScript) work as well. – Ismael Miguel Jan 6 '18 at 12:07

Via the Developer Tools of Chrome, I could dynamically remove the selectstart event handler and then could select the text (and hopefully use Ctrl+C which was not disabled).

score 1 · Answer 14 · answered Apr 23 '24 at 23:22

If you want to disable a website from blocking you from selecting text, try the following:

Inspect the website using developer tools.
Locate the <head></head> block.
Select the <head></head> block.
Press the delete key.

Since the <head /> typically contains the CSS links, you'll be removing the styling that disables you from selecting text.

score 0 · Answer 15 · answered May 03 '22 at 15:43

0

I saved the web page and then opened it in MS Word. Although that removed some formatting, it allowed me to select and copy the text. An annoying but relatively easy workaround.

answered May 03 '22 at 15:43

John

1

Eric · Answer 16 · 2022-09-25T22:36:32.413

0

I had a similar problem with a parcel-tracking site which had some Chinese writing I needed to translate.

So I saved the page as a pdf and could then select and copy anything I needed in the pdf! (I'm using Ubuntu with print to pdf).

edited Sep 25 '22 at 22:36

answered Sep 25 '22 at 22:35

Eric

1

score 0 · Answer 17 · answered Jun 12 '24 at 17:03

0

I found a different way to disable selecting with CSS:

  pointer-events: none;

Disabling that property with the developer tools on the node I wanted to copy text from made it work.

answered Jun 12 '24 at 17:03

Enrique García Cota

1

score 0 · Answer 18 · answered Mar 18 '25 at 21:13

I found a Chrome Extension called Freedom Click that works well to solve this issue, just goto the Chrome store and search for it there. Here is the description from the Chrome extension page

Description:

Click with freedom, not frustration!

Freedom Click is here to take back control of your browser! It restores your basic rights: select text, right-click, save content, and click links without interference. We disable all the sneaky tricks websites use to hijack your experience, letting you enjoy the web the way it was meant to be—simple and smooth. No more restrictions. Just pure, unrestricted freedom with every click."

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

18 Answers18

Linked

Related