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

74

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

私が試したもの：

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

使用about:config完全にFirefoxでJavaScriptを無効にします。それでも効果はありません。

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

テキストは、画像、フラッシュ、またはHTML5キャンバスectではありません。すべてがDIVおよびPタグ内にありますが、テキスト選択をブロックする可能性のあるスタイルは見つかりませんでした。

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

— user6329530
ソース

8

「ウェブサイトはどのようにテキストのマーキングをブロックしますか」 -彼らはに設定style.userSelectしnoneます。

2

@ Xen2050ほとんどの場合、テキストのコピーは気にしません。マウスをクリックするだけでフレーズや用語をマークしてGoogleで検索できる機能が大好きです（ダブルクリック、右クリックで「Googleを検索...」）。ソースに移動して（クリーンソースである場合）、単語をスキャンしてコピーし、Googleに貼り付けることもできますが、これは面倒です。あなたのウェブサイトのテキストをコピーしたい人はどうにかしてそれを行うことができますが、快適なワークフローを望んでいる人は邪魔されます。

— user6329530

122

ちょっとした時間をかけて、これが優れたセキュリティ対策であると考えているすべての妄想的なWeb開発者に同情できますか？

— MCMastery

3

慣習がどれほど普及しているかはもうわかりませんが、テキストなどのコピーを防ぐためにページ全体をカバーするように引き伸ばされた単一ピクセル画像のいくつかのインスタンスを実行していることを覚えています。ユニコーンスターとどこでも点滅するテキスト

— ...-RIanGillis

27

@MCMasteryさらに悪いことに、それはひどいことを知っているが、とにかくやらなければならないと言われている開発者たち。ほとんどの場合、彼らは人々がコンテンツを盗むことを心配しています。その後、SOのようなサイトがあります。これらのサイトは常にスクレイプ/盗難されていますが、商業的には実行可能です。ユーザーベースを疎外することは、ビジネスに悪いことがわかります。誰が考えただろうか？！

— corsiKa

81

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 Developer Site：user-select。

開発者ツールでスタイルを削除することにより、おそらくこれをオーバーライドできます（F12FirefoxまたはChromeでを押します）-JavaScriptアプレットを作成して、これを設定する時間を費やした後、より少ない労力でそのスタイルを削除できます。あなたの部分（サイトに複数回アクセスする予定がある場合は、時間を節約できます）。

また、このメモを追加したいと思います。これが、その効果の少なくとも一部を得る唯一の方法ではないかもしれません。別の可能な方法は、テキストを含む非表示のDIVカバーDIVを持つことです。この方法では、カーソルは最上部のコンテンツに基づいているため、マウスカーソルはIビーム（テキストカーソル）になりませんDIV。（Ctrl- Aおそらくそのテキストをカバーするでしょう。）

ウェブサイトがそのようなことをして、私が技術用語と名前をグーグルに手で入力することを私に強制するとき、それはかなり迷惑です。それは私のワークフローを妨げます。

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

— TOOGAM
ソース

61

user-select責任を持って適用されたときにCSSスタイルはかなり便利です。たとえば、タッチスクリーン上の（特に年配の）ユーザーがラベルテキストの近くのボタンをクリックする場合、ボタンをクリックする代わりにラベルテキストにマークを付けないようにします。

— フィハグ

14

「デフォルト」とはどういう意味ですか？この設定は、Webサイトで特に有効になっている場合にのみ有効になりますが、「デフォルト」とは思えません。いつも...ずっとあなたがマイナスにこれらの機能を使用する正当な理由を持っている人たちに影響を与えることなく、それを防ぐためにできることはありません、悪いWebデザイナーによって悪用される可能性が特長があります

— ショーン・バートン

11

@SeanT繰り返しますが、Webページを見ている人にサービスを提供するブラウザが存在する場合、その仕事は、Webサーバーが送信する内容に応答することです。ユーザーがページをミュートする、ポップアップを許可しない、またはテキストをコピーするように指示した場合、ブラウザはそうする必要があります。

— 累積

8

このような機能を明示的に有効にするようにブラウザを設定する手間をかけるブラウザユーザーはいません。デフォルトで有効になっていない場合、本質的には役に立たず、まったく実装されない可能性があります。また、すべての機能をユーザーが明示的に有効にする必要があることを提案している場合、どこに線を引きますか？Webサイトで画像を表示するには、ユーザーが「画像」機能を有効にする必要がありますか？ユーザーが必要なすべての機能を有効にするまで、すべてのブラウザーは基本的にデフォルトでLynxでなければなりませんか？

— ショーンバートン

13

@Acccumulation user-select：none機能は、ドロップダウンリストからオプションを選択するときにい青い背景を止めるなど、Webページのスタイルを維持するためにあらゆる場所で使用されます。正しく実装されているため気付かないだけです。ここでの問題は、ユーザーに制限された方法で実装されていることであり、ブラウザにはこの2つを区別する方法がないということです。したがって、開発者を非難する:)

— ショーンT

11

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

// ==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などのユーザースクリプトマネージャーで簡単にオン/オフを切り替えることができます。

— ヘロタール
ソース

9

ユーザースクリプトを追加するには、「greasemonkey」などの拡張機能が必要になる場合があると言っておく価値があります。

— -Stilez

1

This will apply to every page if left enabled, which might not be desirable in all situations.URLが特定のサイトまたはサイトの配列と一致する場合にのみスクリプトを実行するifステートメントで関数をネストすることはできませんか？

— ハシム

1

@Hashimそれは必要ではありません。1つ以上の@matchステートメントで適用するページを指定できますが、特定のサイトまたは常に変更したいサイトのセットのみにアクセスする場合を除き、特定のページに適用する場合はスクリプトを変更する必要があります。サンプルスクリプトでは*://*/*、一致するURLとして使用することで汎用化したため、あらゆる場所に適用されます。ユーザースクリプトマネージャーのメニューからオンとオフを切り替えることができます。

— ヘロタール

10

開発者ツール（F12）を開き、[要素]タブに移動して、次のCSSルールをbodyの下にチェック解除します。

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

— JMK
ソース

7

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

View > Page Style > No Style

ドイツ語で：

Ansich > Webseiten-Stil > Kein Stil

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

— エリック・ドゥミニル
ソース

1

うん、IE11でも動作します。

— マルコデマイオ

4

Ctrl+ Pを押して、印刷プレビューから必要なものを取得できます。

— デア・ホッチスタプラー
ソース

3

私はスタイラス（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>）だけでなく、すべての要素に適用されるようにすることです。選択ブロックがボタンテキストのみに適用される場合がありました。そのため、cssを作成しても<body>役に立ちません。

外国語のウェブサイトでのインスタント翻訳にはセレクションを使用します。

— でれい
ソース

インライン<body>タグのフォーマットと可視性を修正しました。superuser.com/help/formatting

— Arjan

0

ユーザースクリプトまたはブラウザー拡張機能に「ブックマークレット」を使用することを好みます。使用してみてください1の多くのブックマークレットを CSSを無効＆必要なテキストをつかむために

Webページの可読性を損なう可能性があるため、ブックマークレットでスタイルを削除する前に、別のタブでページを開くことがあります（タブを右クリックして[複製]を選択します）

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

— mvark
ソース

0

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

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

インストールしたら、ツールバーのアイコンをクリックして、「新しいスタイルを作成」を選択します。現在アクセスしている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;
  }
}

— 黒曜石のフェニックス
ソース

Firefoxでのみ実行されるものにwebkitおよびmsプレフィックスを追加するのは少し冗長です。

— ステファンBijzitter

@StephanBijzitter確かに、ページ上に既にあるユーザー選択に関連するすべてのスタイルを上書きしました。ただし、クロムを使用していないが、同様の拡張子を持つ誰かがこのクラスを簡単にコピーして、仕事なしで同じメリットを得ることができることを意味します-そしてそれは実際にソリューションを害しません。

— 黒曜石のフェニックス

0

提案されたソリューションのいくつかはブラウザ固有のものである可能性があるため、いくつかの代替案を提案する価値があります。

あなたをより尊重するブラウザを使用してください。

a。Emacsにはブラウザがemacs-w3mありeww、常にテキストを選択できます。

b。以下のような他のテキストベースのブラウザlynx、elinksおよびw3m、1はテキストを選択できるようにするかもしれないが、でもない場合は、ターミナルウィンドウでこれらのプログラムを実行している場合、一つは自分のマウスを使用してテキストを選択することができます。また、からこれらのプログラムを使用している場合、マウスがなくてもテキストをコピーする機能をtmux使用できますtmux。
コマンドラインツールを使用して、URL全体を読みやすいテキスト形式でダウンロードします。

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

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

— user1404316
ソース

0

アドオン「絶対有効化右クリック＆コピー」をインストールします。これにより、他のスクリプトなしアドオンではできないすべての機能が有効になります。

— クリス
ソース

0

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

html, body {
    user-select: text;
}

選択した任意のWebサイトにその（またはその他の）CSSコードをインストールできるStylishという拡張機能があります。上記のcssコードを入力して、どのWebサイトに適用するかを伝えてください。この拡張機能は、Chrome、Baidu、Firefox、Operaで動作します。IEを使用している場合は、運が悪いです。しかし、あなたはすでにそうであることを知っています。

— アグカラ
ソース