web-dev-qa-db-fra.com

Comment les sites Web bloquent-ils la sélection de texte et comment les débloquer?

Il existe un site Web ( exemple ) qui bloque en quelque sorte la sélection de texte. Aussi ça bloque Ctrl+A pour tout sélectionner, il n’existe pas non plus de "Copier" dans le menu contextuel.

Ce que j'ai essayé

Certains sites utilisent JavaScript pour bloquer la sélection. J'ai donc désactivé toutes les sources JavaScript dans l'addon sans script dans Firefox. J'ai essayé le même site dans Google Chrome avec l'addon Script Safe. Assurez-vous que tout est bloqué, vous ne pouvez toujours pas sélectionner du texte. Mousepointer reste une flèche et non un curseur de texte également sur tout le site.

Utilisé about:config pour désactiver JavaScript complètement dans Firefox. Toujours aucun effet.

J'ai lu que certains sites utilisent des DIV avec le style display: block, j'ai donc utilisé Inspect pour examiner les styles du site. Il n’ya pas une seule mention de "bloc" sur l’ensemble du site Web, pas dans les CSS intégrées ni dans le style d’objet = -attributes.

Le texte n'est pas une image ou flash ou une ect HTML5 canvas. Tout se trouve dans les balises DIV et P mais aucun style susceptible de bloquer la sélection de texte n'a été trouvé.

Comment le site Web peut-il encore bloquer toute sélection de texte? Sans parler de la raison pour laquelle les navigateurs supportent de tels comportements. Je veux juste utiliser un mot ou une phrase sélectionné (e) et le rechercher à l'aide de Google en cliquant avec le bouton droit de la souris. C’est assez ennuyant qu’un site Web fasse de telles choses et me force à taper manuellement des termes techniques et des noms dans Google. Cela perturbe mon flux de travail.

google-chromefirefoxbrowserjavascript
71
bxyify

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

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

Donc, cet effet s'applique à la balise BODY entière.

Documentation sur ce CSS: Site du développeur Mozilla: sélection de l'utilisateur .

Vous pouvez probablement le remplacer en supprimant le style dans les outils de développement (appuyez sur F12 dans Firefox ou Chrome) - vous pouvez même créer un applet JavaScript qui, après avoir investi le temps nécessaire pour l’installer, peut supprimer ce style avec moins d’effort instantané de votre part (ce qui peut vous faire gagner du temps si vous envisagez de le visiter. le site plusieurs fois).

J'aimerais également ajouter cette remarque: Ce n'est peut-être pas le seul moyen d'avoir au moins une partie de cet effet. Une autre solution possible serait d’avoir un DIVinvisible qui recouvre le DIVqui contient le texte. De cette façon, le curseur de la souris ne se transformerait pas en I-beam (curseur de texte) car il serait basé sur le contenu du DIVen haut. (Ctrl-A couvrirait probablement ce texte, cependant.)

C'est assez ennuyant quand un site Web fait de telles choses et m'oblige à taper manuellement les termes techniques et les noms dans Google. Cela perturbe mon flux de travail.

Amen! En voyant cela, je suis déçu de l’existence d’un tel style CSS mis en œuvre par les principaux navigateurs. De telles choses sont assez énervantes, en effet!

80
TOOGAM

Comme il a déjà été indiqué, la définition de user-select: none dans le code CSS de la page est ce qui désactive la sélection de texte sur une page. Le moyen le plus simple de supprimer ce bloc de sélection de texte consiste à utiliser un script utilisateur semblable à celui-ci qui remplace le paramètre:

// ==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);
})();

Remarque: Ceci s’applique à chaque page si elle est activée, ce qui peut ne pas être souhaitable dans toutes les situations.

Le script peut être installé et facilement activé/désactivé avec un gestionnaire de script utilisateur tel que Violentmonkey , Tampermonkey ou Greasemonkey .

11
Herohtar

Ouvrez les outils de développement (F12), passez sur l’onglet Eléments, puis décochez les règles CSS suivantes sous body :

  • sélection de l'utilisateur: aucune;
  • webkit-user-select: aucun;

 Demo Image

10
JMK

Avec Firefox, il existe un moyen très simple:

View > Page Style > No Style

En allemand:

Ansich > Webseiten-Stil > Kein Stil

 enter image description here

Cela fonctionne également très bien pour télécharger des images incorporées sur lesquelles le clic droit a été désactivé.

7
Eric Duminil

Vous pouvez frapper Ctrl + P et prenez ce dont vous avez besoin dans l'aperçu avant impression.

enter image description here

2
Der Hochstapler

J'utilise Stylus ( https://add0n.com/stylus.html ) et j'ai créé un style à appliquer à tous les sites Web. Je m'assure donc que tout est sélectionnable:

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

L'astérisque permet de s'assurer que le style n'est pas seulement appliqué à un élément css donné (tel que <body>), mais à tous les éléments. J'ai rencontré des cas où le blocage de la sélection était appliqué à un texte de bouton uniquement, si bien que faire un css pour <body> n'aiderait pas.

J'utilise la sélection pour la traduction instantanée sur des sites Web en langue étrangère.

1
derei

Je préfère utiliser " bookmarklets " aux scripts utilisateur ou aux extensions du navigateur. Essayez d’utiliser one of many bookmarklets pour désactiver CSS et récupérer le texte requis

Dans la mesure où cela peut gêner la lisibilité de la page Web, j’ouvre parfois la page dans un onglet différent (clic droit sur l’onglet, sélectionnez Dupliquer) avant de supprimer le style avec le bookmarklet.

Vous pouvez également essayer le Google Mobilizer Bookmarklet pour afficher uniquement le texte de pages Web

0
mvark

Plusieurs des solutions proposées peuvent être spécifiques à votre navigateur, il est donc conseillé de suggérer quelques alternatives:

  1. Utilisez un guide qui vous respecte davantage.

    une. Emacs a les navigateurs emacs-w3m et eww qui permettent toujours de sélectionner du texte.

    b. D'autres navigateurs basés sur le texte, tels que lynx, elinks et w3m, peuvent permettre de sélectionner du texte, mais même si ce n'est pas le cas, si vous exécutez ces programmes dans une fenêtre de terminal, vous pouvez sélectionner du texte à l'aide de la souris. Et, si vous utilisez ces programmes depuis tmux, vous pouvez utiliser la capacité de tmux pour copier du texte même sans souris.

  2. Utilisez un outil de ligne de commande pour télécharger l'intégralité de l'URL dans un format texte lisible.

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

    b. lynx -dump [your_url] > your_file.txt. Je préfère généralement celui-ci car il marque les hyperliens comme des notes lisibles!

0
user1404316

Comme d'autres réponses l'ont indiqué, il s'agit du code CSS figurant dans le corps des pages. Tandis que vous pouvez modifier ceci à la main à chaque fois, si vous utilisez beaucoup ce site, je vous conseillerais, si vous utilisez Chrome, d’installer l’extension Stylish .

Stylish vous permet de créer des CSS supplémentaires à appliquer aux pages. Il peut être utilisé sur tout le web. Il présente l'avantage de s'appliquer automatiquement chaque fois que vous visitez le site Web (vous n'avez donc pas besoin de l'ajouter via les outils de développement à chaque chargement de page).

Une fois installé, cliquez sur l'icône dans la barre d'outils et sélectionnez "Créer un nouveau style". Il créera automatiquement l'entrée pour le site Web que vous visitez actuellement. Vous pouvez ensuite ajouter n'importe quel CSS à la page. Mais soyez averti: certains styles peuvent ne pas être remplaçables (surtout s’il est écrit sur l’élément lui-même plutôt que sur une classe CSS).

Dans ce cas, vous pouvez utiliser la fonction d'importation et ajouter le code ci-dessous, ce qui devrait vous permettre de sélectionner le texte sur le site Web auquel vous êtes lié.

@-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;
  }
}
0
Obsidian Phoenix