web-dev-qa-db-ja.com

HTMLページでテキストを選択不可にする方法はありますか？

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

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

javascripthtmlcsscross-browsertextselection
136
Tyler

ほとんどのブラウザでは、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"));
187
Tim Down
<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 から来ています

41
dimarzionist

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

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

これを試して：

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

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

13
Stephen M. Redd

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

彼らが言うように、これは将来の「ユーザー選択」の「プレビュー」なので、おそらく Opera または WebKit -basedのブラウザーがそれをサポートするでしょう。 Internet Explorerの何かを見つけたことも思い出しますが、何を覚えているのか覚えていません:)。

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

11
Jorge Alves

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

::selection {
    background-color: transparent;
}

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

8
jlleblanc

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

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

6
Dave Rutledge

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

4
Alan Hensel

選択を抑制することが望ましい理由の例については、 SIMILE TImeline を参照してください。これは、ドラッグアンドドロップを使用してタイムラインを探索します。変だね。

4
pdc

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

3
rgb

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

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

3
Big Bill

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

1
Wedge

画像も選択できます。

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

1
Kinjal Dixit

JavaScriptまたはCSSメソッドは、Firebugで簡単に回避できます（Flickrの場合のように）。

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

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

1
Taylor Edmiston

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

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

1
kbcom

以下のFirefoxは、書き込み行を削除しても機能しませんが、興味深いことに動作します。書き込み行が必要な理由は誰にもわかります。

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