javascript - HTMLページでテキストを選択できないようにする方法はありますか？

Question

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

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

score 201 · Accepted Answer

ほとんどのブラウザーでは、これは 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"));

score 41 · Accepted Answer

<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から来ています

score 34 · Accepted Answer

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

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

score 13 · Accepted Answer

これを試して：

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

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

score 11 · Accepted Answer

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

彼らが言うように、これは将来の「ユーザー選択」の「プレビュー」であるため、OperaまたはWebKitベースのブラウザーがそれをサポートする可能性があります。また、Internet Explorer 用の何かを見つけたのを覚えていますが、何を覚えていません :)。

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

score 8 · Accepted Answer

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

::selection {
    background-color: transparent;
}

ulAIR アプリケーション (WebKit エンジン) の一部の ThemeRoller 要素で私が抱えていた問題のほとんどを処理してくれました。まだ選択されている無の小さな (約 15 x 15) パッチを取得していますが、ページの半分は以前に選択されていました。

score 6 · Accepted Answer

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

もう少し考えた後の注意-これらの「カバー」をリンクする必要があるため、それらをクリックするとタブが想定されていた場所に移動します。つまり、アンカー要素をdisplay:box幅に設定してこれを行うことができる/行う必要があります透明な背景画像と同様に設定された高さ。

score 4 · Accepted Answer

Safari-khtml-user-select: noneの場合は、Mozilla -moz-user-select(または、JavaScript の場合target.style.KhtmlUserSelect="none";) と同様です。

score 4 · Accepted Answer

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

score 3 · Accepted Answer

これが興味のある人のためのSassミックスイン（scss）です。Compass / 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はより堅牢な方法でそれを行いますが、つまり、選択したベンダーのサポートのみを追加します。

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

画像も選べます。

JavaScript を使用したテキストの選択解除には制限があり、選択したい場所でも発生する可能性があります。豊かで成功したキャリアを確保するには、通常以上にブラウザに影響を与えたり、ブラウザを管理したりする能力を必要とするすべての要件を避けてください.

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

JavaScript または CSS メソッドは、Firebug で簡単に回避できます (Flickr の場合と同様)。

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

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

score 0 · Accepted Answer

以下は、動作しない書き込み行を削除すると、Firefox で十分に興味深い動作をします。書き込み行が必要な理由は誰にでもあります。

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

javascript - HTMLページでテキストを選択できないようにする方法はありますか？

16 に答える 16

Related

Reference