HTML ページでテキストを選択できないようにする方法はありますか?[重複]

https://stackoverflow.com/questions/69430

09-06-2019
|

質問

この質問にはすでに答えがあります:

テキスト選択のハイライトを無効にするにはどうすればよいですか? 40 件の回答

タブ名など、選択すると見た目が悪くなるテキスト要素を含む HTML UI を構築しています。残念ながら、ユーザーがタブ名をダブルクリックするのは非常に簡単で、多くのブラウザではデフォルトでタブ名が選択されています。

JavaScript のトリックでこれを解決できるかもしれません (私もそれらの答えを知りたいです) -- しかし、私はすべてのブラウザーで機能する何かが CSS/HTML に直接あることを心から望んでいます。

解決

ほとんどのブラウザでは、CSS を使用してこれを実現できます。

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

IE < 10 および Opera の場合は、 unselectable 選択不可にしたい要素の属性を指定します。これは、HTML の属性を使用して設定できます。

<div id="foo" unselectable="on" class="unselectable">...</div>

残念ながら、このプロパティは継承されないため、内部のすべての要素の開始タグに属性を追加する必要があります。 <div>. 。これが問題となる場合は、代わりに JavaScript を使用して、要素の子孫に対してこれを再帰的に実行できます。

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

他のヒント

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

編集

コードは明らかに次から来ています http://www.dynamicdrive.com

正しい CSS バリエーションはすべて次のとおりです。

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

これを試して：

<div onselectstart="return false">some stuff</div>

シンプルですが効果的です...すべての主要ブラウザの現在のバージョンで動作します。

Firefox の場合、CSS 宣言「-moz-user-select」を「none」に適用できます。彼らのドキュメントをチェックしてください。 ユーザー選択.

彼らが言うように、これは将来の「ユーザー選択」の「プレビュー」なので、おそらくオペラまたはウェブキットベースのブラウザはそれをサポートします。Internet Explorer 用の何かを見つけた記憶もありますが、内容は覚えていません :)。

いずれにせよ、テキスト選択によって一部の動的な機能が失敗するような特定の状況でない限り、ユーザーが Web ページに期待しているもの、つまりユーザーが望むテキストを選択できることを実際にオーバーライドするべきではありません。

ここで説明されている CSS である程度の成功を収めています http://www.quirksmode.org/css/selection.html:

::selection {
    background-color: transparent;
}

ThemeRoller で抱えていた問題のほとんどが解決されました。 ul AIR アプリケーション (WebKit エンジン) の要素。まだ小さい（約）を得ています。15 x 15) 選択された何もないパッチですが、以前はページの半分が選択されていました。

z インデックスを高くしてテキスト領域上に div を絶対配置し、これらの div に透明度を与えます。 GIF 背景グラフィック。

もう少し考えてから注意してください - これらの「カバー」をクリックするとタブがあるはずの場所に移動できるように、これらの「カバー」をリンクする必要があります。つまり、アンカー要素を display:box, 、幅と高さの設定、および透明な背景画像。

選択を抑制することが望ましい理由の例については、を参照してください。同じようなタイムライン, 、ドラッグアンドドロップを使用してタイムラインを探索しますが、その間にマウスを誤って垂直に動かすとラベルが予期せず強調表示され、奇妙に見えます。

サファリの場合は、 -khtml-user-select: none, 、Mozilla と同じように -moz-user-select (または、JavaScript では、 target.style.KhtmlUserSelect="none";).

「あなたのコンテンツが本当に面白いなら、最終的にそれを保護するためにできることはほとんどありません」

それは事実ですが、私の経験から言えば、ほとんどのコピーは「最終的には」オタクや決意の盗作者などとは何の関係もありません。それは通常、無知な人々による何気ないコピーであり、単純で簡単に破られる保護（つまり、私たちのような人々によって簡単に破られる）でさえ、それらを阻止するのに非常にうまく機能します。彼らは「ソースの表示」やキャッシュなどについて何も知りません...てか、彼らは Web ブラウザが何なのか、あるいは Web ブラウザを使用していることさえ知りません。

ここにありますサス興味のある方は mixin (scss) をご覧ください。方位磁針/CSS 3 にはユーザー選択のミックスインがないようです。

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

ただし、Compass はより堅牢な方法でそれを実行します。選択したベンダーのサポートのみを追加してください。

見た目が悪い場合は、CSS を使用して選択したセクションの外観を変更できます。

Firebug を使用すると、JavaScript や CSS のメソッドはどれも簡単に回避できます (Flickr の場合と同様)。

使用できます ::selection 擬似要素 CSSでハイライトの色を変更します。

タブがリンクであり、アクティブ状態の点線の長方形それが気になる場合は、それを削除することもできます（もちろん使いやすさを考慮してください）。

選択機能をオフにするとユーザーエクスペリエンスが向上する場合が多くあります。

たとえば、ユーザーが、それに関連付けられたインターフェイス要素のテキスト (コピーされるテキスト内に散在する) をコピーせずに、ページ上のテキストブロックをコピーできるようにします。

画像も選択可能です。

JavaScript を使用してテキストの選択を解除することには制限があり、選択したい場所でもこのような問題が発生する可能性があります。豊かで成功したキャリアを確保するには、通常を超えてブラウザに影響を与えたり、ブラウザを管理したりする能力を必要とするすべての要件を回避してください。もちろん、彼らがあなたに非常に良い給料を払っている場合を除きます。

以下は Firefox で興味深いことに動作しますが、書き込み行を削除すると動作しなくなります。書き込みラインが必要な理由は誰でもわかります。

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow