web-dev-qa-db-ja.com

Webサイトはテキストの選択をどのようにブロックし、どのようにブロック解除しますか？

どういうわけかテキストの選択をブロックするWebサイト（ example ）があります。またブロック Ctrl+A すべてを選択するために、ポップアップメニューに「コピー」もありません。

私が試したこと：

一部のサイトでは、JavaScriptを使用して選択をブロックしています。だから私はFirefoxのスクリプトなしのアドオンですべてのJavaScriptソースを無効にしました。スクリプトセーフアドオンを使用して、Google Chromeの同じサイトを試しました。すべてがブロックされていることを確認してください。まだテキストを選択できません。サイト全体でも、マウスポインタはテキストカーソルではなく矢印のままです。

FirefoxでJavaScriptを完全に無効にするためにabout:configを使用しました。まだ効果はありません。

一部のサイトではスタイル表示：ブロックでDIVを使用しているので、Inspectを使用してサイトのスタイルを調べました。ウェブサイト全体での「ブロック」についての言及はなく、埋め込みCSSやobject style = -attributesにはありません。

テキストは画像やフラッシュ、あるいはHTML5のキャンバス効果ではありません。すべてDIVタグとPタグ内にありますが、テキスト選択を妨げる可能性のあるスタイルは見つかりませんでした。

Webサイトがテキストの選択をブロックする方法はありますか。ブラウザがそのような動作をサポートしている理由は言うまでもありません。選択した単語や文章を使い、マウスの右クリックでそれをグーグルで検索したいだけです。ウェブサイトがそのようなことをして、私が技術用語と名前を手でグーグルにタイプすることを私に強いるとき、それはかなりいらいらします。それは私のワークフローを乱します。

google-chromefirefoxbrowserjavascript
71
bxyify

https://www.angst-panik-hilfe.de/angst-panik.css 表示：

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

したがって、その効果はBODYタグ全体に適用されます。

このCSSに関するドキュメントは Mozilla開発者サイト：user-select です。

あなたはおそらくこれをオーバーライドすることができます。 F12 FirefoxやChromeで） - これを設定する時間を費やした後で、あなたの側でそれほど瞬時の努力でそのスタイルを取り除くことができるJavaScriptアプレットを作成することさえできるかもしれません（あなたが訪問する予定なら時間節約になるかもしれません）サイトを複数回）。

私はこのメモを付け加えたいと思います：これがその効果の少なくともいくつかを持つ唯一の方法ではないかもしれません。もう1つの可能な方法は、目に見えないDIVがテキストを含むDIVをカバーすることです。このようにして、マウスカーソルがIビーム（テキストカーソル）に変わることはありません。カーソルは最上位のDIVの内容に基づいているためです。 （Ctrl - A おそらくそのテキストをカバーするでしょう。）

ウェブサイトがそのようなことをして、技術用語と名前を手でグーグルにタイプすることを私に強いるとき、それはかなりいらいらします。それは私のワークフローを乱します。

アーメン！これを見て、私はそのようなCSSスタイルが主要ブラウザによって実装されていることに失望しています。そのようなことは実にかなり厄介です。

80
TOOGAM

すでに述べたように、ページのCSSでuser-select: noneを設定すると、ページ上のテキストの選択が無効になります。そのテキスト選択ブロックを削除する最も簡単な方法は、設定を上書きする次のようなユーザースクリプトを使用することです。

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

注：有効のままにしておくと、これはすべてのページに適用されます。これは、すべての状況で望ましくない場合があります。

このスクリプトは、 Violentmonkey 、 Tampermonkey などのユーザースクリプトマネージャを使用してインストールおよび簡単にオン/オフを切り替えることができます。または Greasemonkey 。

11
Herohtar

開発者ツールを開き（F12）、[要素]タブに移動し、本文の下にある次のCSSルールのチェックを外します。

  • ユーザー選択：なし。
  • webkit-user-select：なし。

Demo Image

10
JMK

Firefoxでは、本当に簡単な方法があります。

View > Page Style > No Style

ドイツ語で：

Ansich > Webseiten-Stil > Kein Stil

enter image description here

また、右クリックが無効になっている埋め込み画像をダウンロードすることもできます。

7
Eric Duminil

あなたはヒットすることができます Ctrl + P そして印刷プレビューから必要なものを入手してください。

enter image description here

2
Der Hochstapler

私はStylus（ https://add0n.com/stylus.html ）を使用しており、すべてのWebサイトに適用するスタイルを作成したので、私はすべてが選択可能であることを確認しています。

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

アスタリスクは、スタイルが特定のcss要素（<body>など）だけでなく、すべての要素に適用されるようにするためのものです。選択ブロックがボタンのテキストだけに適用されるケースに遭遇したので、<body>のCSSを作成することは役に立ちません。

私は外国語のウェブサイトでの即時翻訳に選択を使います。

1
derei

ユーザスクリプトやブラウザ拡張機能には " bookmarklets "を使うのが好きです。 CSSを無効にして必要なテキストを取得するには、 one / の多くのブックマークレット を使用してください。

それはウェブページの読みやすさを台無しにするかもしれないので、私は時々ブックマークレットでスタイルを削除する前に異なるタブでタブを開く（タブを右クリックし、複製を選択する）

Google Mobilizer Bookmarkletを試して、Webページのテキストだけを表示することもできます

0
mvark

提案された解決策のいくつかはブラウザ特有のものかもしれないので、いくつかの代替案を提案する価値があります。

  1. あなたをもっと尊敬する仲介人を使いなさい.

    a。 Emacsはブラウザemacs-w3mとewwを持っていますので、いつでもテキストを選択することができます。

    b。 lynx、elinks、w3mなどの他のテキストベースのブラウザでは、テキストを選択できますが、そうでなくても、端末ウィンドウでこれらのプログラムを実行している場合は、マウスを使用してテキストを選択できます。そして、もしtmuxの中からこれらのプログラムを使っているのであれば、マウスがなくてもテキストをコピーするtmuxの能力を使うことができます。

  2. コマンドラインツールを使用して、URL全体を読みやすいテキスト形式でダウンロードします。

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

    b。 lynx -dump [your_url] > your_file.txt。ハイパーリンクを読みやすい脚注としてマークしているので、私は通常これを好む！

0
user1404316

他の答えが述べているように、それはページの本体のCSSと関係がある。毎回 can これを手動で編集することができますが、このサイトを頻繁に使用する場合は、Chromeを使用する場合は Stylish の拡張子をインストールすることをお勧めします。

スタイリッシュ を使用すると、ページに適用する追加のCSSを作成できます。それはWeb中どこでも使用することができます。 Webサイトにアクセスするたびに自動的に適用されるという利点があります（そのため、ページを読み込むたびに開発ツールを使用して追加する必要はありません）。

インストールが完了したら、ツールバーのアイコンをクリックして[新しいスタイルの作成]を選択します。それはあなたが現在訪問しているウェブサイトのエントリを自動的に作成します。それからあなたはページに好きなCSSを追加することができます。ただし注意が必要です。一部のスタイルはオーバーライドできない場合があります（特にCSSクラスではなく要素自体に記述されている場合）。

この場合は、インポート機能を使用して、以下のコードを追加します。これにより、リンク先のWebサイト上のテキストを選択できるようになります。

@-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

次のCSSスタイルを作成するだけです。

html, body {
    user-select: text;
}

Stylishという拡張子があります。あなたの選んだウェブサイト上記のCSSコードを入力して、どのWebサイトに適用したいのかを伝えてください。 このエクステンションはChrome、Baidu、FirefoxそしてOperaで動作します。IEを使用している場合は不運です。しかし、あなたはすでにそれがあなたではないことを知っています。

0
agcala

AddOn "Absolute Enable Right Click＆Copy"をインストールすると、他のNo Scriptアドオンでは不可能なことがすべて可能になります。

0
Chris