google chrome – どのようにウェブサイトはテキストの選択をブロックし、どのように私はそれをブロック解除するには?

browser firefox google-chrome javascript

テキストの選択をなぜかブロックしているサイト(example)があります。また、Ctrl+Aの選択を全てブロックし、ポップアップメニューにも「コピー」がありません

試してみたこと

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

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

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

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

ウェブサイトはどのようにしてテキストの選択をブロックすることができるのでしょうか?ブラウザがそのような動作をサポートしている理由は言うまでもありません。私はただ選択した単語や文章を使いたいだけで、マウスの右クリックでgoogleで検索したいだけです。そんなことをして、専門用語や名前を手入力してgoogleに入力しなければならないサイトがあると、かなりイライラしてしまう。作業の邪魔になる

  80  user6329530  2018-01-05


ベストアンサー

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

開発者ツールでスタイルを削除することで、おそらくこれを上書きすることができます (Firefox または Chrome で F12 を押してください) – これを設定するために時間を投資した後、あなたの側でより少ない労力でそのスタイルを削除することができる JavaScript アプレットを作成することができるかもしれません (サイトを何度も訪問する予定がある場合には、時間の節約になるかもしれません)

これは、少なくともその効果の一部を持つ唯一の方法ではないかもしれません。もう一つの可能な方法は、見えないDIVがテキストを持つDIVを覆うことです。そうすれば、カーソルは最上位のDIVの内容に基づいているので、マウスカーソルはIビーム(テキストカーソル)にはならないでしょう。(CtrlA は、おそらくそのテキストを覆うことになるでしょうが)

こういうことをしてくれるサイトがあって、専門用語や名前を手入力でgoogleに入力させられると、かなりイライラします。仕事の流れを乱してしまう

アーメンこれを見て、メジャーなブラウザでこのようなCSSスタイルが実装されていることにガッカリしました。こういうのって結構ウザいですよね

84  TOOGAM  2018-01-05


すでに述べたように、ページの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 などのユーザースクリプトマネージャを使って、スクリプトをインストールして簡単にオン/オフを切り替えることができます

14  Herohtar  2018-01-05


開発者ツールを開き(F12)、「要素」タブに切り替え、bodyの下にある以下のCSSルールのチェックを外します

  • user-select: none;
  • webkit-user-select: none;

Demo Image

11  JMK  2018-01-05


Firefoxだと、本当に簡単な方法があります

View > Page Style > No Style

In German:

Ansicht > Webseiten-Stil > Kein Stil

enter image description here

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

7  Eric Duminil  2018-01-08


Ctrl + Pを叩いて、印刷プレビューから必要なものをつかむことができます

enter image description here

6  Der Hochstapler  2018-01-09


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

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

アスタリスクは、スタイルが特定のcss要素(<body>のような)だけに適用されるのではなく、すべての要素に適用されることを確認するためのものです。私の場合、ボタンのテキストだけに選択ブロックが適用されている場合があったので、<body>用のcssを作っても意味がありませんでした

私は外国語のウェブサイトでインスタント翻訳のために選択を使用しています

3  derei  2019-01-07


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

スタイリッシュでは、ページに適用するCSSを追加で作成することができます。ウェブ上のあらゆる場所で使用することができます。Webサイトにアクセスするたびに自動的に適用されるというメリットがあります(そのため、ページを読み込むたびに開発ツールを使って追加する必要はありません)

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

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

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

1  Obsidian Phoenix  2018-01-08


私はユーザースクリプトやブラウザの拡張機能よりも、「ブックマークレット」を使う方が好きです。ブックマークレットのうち、ブックマークレットを使って、CSSを無効にしてみてください

ウェブページの読みやすさが損なわれる可能性があるので、ブックマークレットでスタイルを削除する前に、別のタブでページを開く(タブを右クリックして「複製」を選択)こともあります

また、Google Mobilizerブックマークレットでウェブページのテキストだけを表示することもできます

0  mvark  2018-01-06


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

  1. もっと自分を尊重してくれるブローワーを使いましょう

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

    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  2018-01-11


他のNo Script AddOnsではできない全ての機能を有効にするAddOn “Absolute Enable Right Click & Copy “をインストールしてください

0  Chris  2019-03-12


以下のようなCSSスタイルを作成するだけです

html, body {
user-select: text;
}

スタイリッシュと呼ばれる拡張機能があり、これを使用すると、お好みのウェブサイトにその(または他の)CSSコードをインストールすることができます。ただ、上記のCSSコードを入力して、それが適用されるようにしたいWebサイト[s]を教えて、あなたは行っても良いです。この拡張機能は、Chrome上で動作します, Baidu, FirefoxとOpera.あなたがIEであることが起こる場合は、あなたは運がないです。しかし、あなたはすでにあなたがしないことを知っている

0  agcala  2019-04-05


選択範囲を無効にするもう一つの方法は、by Ismael Miguelが説明しているように、プロパティ onselectstart を使用することです

もう一つの方法は、本文にonselectstart="return false;"を追加することです。他のテクニック(JavaScriptで選択範囲を削除するなど)も同様に機能します。- Ismael Miguel Jan 6 ’18 12:07

Chromeの開発者ツールを介して、私は動的にselectstartイベントハンドラを削除し、テキストを選択することができました(そして、うまくいけば無効化されていなかったCtrl+Cを使用することができます)

0  Sandra Rossi  2020-01-24


タイトルとURLをコピーしました