☰

ウェブサイトはどのようにしてテキストの選択をブロックしますか? また、それを解除するにはどうすればよいですか?

tag-icon • tag-icon google-chrome firefox browser javascript
ウェブサイトはどのようにしてテキストの選択をブロックしますか? また、それを解除するにはどうすればよいですか?

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

私が試したこと:

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

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

一部のサイトでは、display:block というスタイルで DIV が使用されていると読んだので、Inspect を使用してサイトのスタイルを調べました。Web サイト全体では、埋め込み CSS にもオブジェクトの style=-attributes にも、「block」という記述は 1 つもありません。

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

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

答え1

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 開発者サイト: ユーザー選択。

おそらく、開発者ツール (Firefox または Chrome では を押す) でスタイルを削除することでこれを上書きできますF12。時間をかけて設定した後、JavaScript アプレットを作成して、それほど手間をかけずにそのスタイルを削除できる場合もあります (サイトに複数回アクセスする予定がある場合は、時間の節約になる場合があります)。

また、次の点にも注意してください。この効果を少しでも得るには、これが唯一の方法ではないかもしれません。別の方法としては、テキストのあるDIVを目に見えない形で覆うという方法がありますDIV。その場合、マウス カーソルは最上位の の内容に基づいているため、I ビーム (テキスト カーソル) にはなりませんDIV。(ただし、 Ctrl- はAおそらくそのテキストを覆ってしまうでしょう。)

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

アーメン！これを見て、主要なブラウザでこのような CSS スタイルが実装されていることに失望しました。このようなことは本当に迷惑です！

答え2

すでに述べたように、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);
})();

注記：有効にしておくと、すべてのページに適用されますが、すべての状況で望ましいとは限りません。

スクリプトは、次のようなユーザースクリプトマネージャーを使用してインストールし、簡単にオン/オフを切り替えることができます。暴力的なモンキー、タンパーモンキー、 またはグリースモンキー。

答え3

この問題を解決する最も簡単な方法は、ブックマークレットを使用することです。

  1. ブラウザで新しいブックマークを作成します。
  2. たとえば、「選択を有効にする」(引用符なし) など、好きな名前を付けます。
  3. 場所のテキストボックスに次のコードを貼り付けます:
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};
})();

したがって、煩わしい Web サイトでテキスト選択を有効にしたいときは、このブックマークをクリックするだけです。

このコードは、Web サイトでテキスト選択を無効にするために嫌な奴らが使用する最も一般的な CSS および JavaScript ベースの方法に対応しています。ただし、あまり一般的ではない方法では、コードに追加の調整が必要になる場合があります。

答え4

開発者ツール（F12）を開き、「要素」タブに切り替えて、以下のCSSルールのチェックを外します。体:

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

デモ画像

関連情報