web-dev-qa-db-ja.com

CSSまたはJavaScriptでテキスト選択を無効にする方法

重複している可能性があります：
テキスト選択ハイライトを無効にするためのCSSルール

私はHTML/CSS/jQueryギャラリーをいくつかのページで作っています。

私は確かに "次へ"ボタンを持っています、それはjQueryクリックリスナーとの単純なリンクです。

問題は、ユーザーがボタンを数回クリックすると、ボタンのテキストが選択され、次にテキスト全体が選択されることです。私の本当に暗いデザインでは、それは本当に醜く無意味です。

だからここに私の質問です：あなたはHTML上のテキスト選択を無効にすることはできますか？そうでなければ、私はフラッシュとテキストフィールドの設定の高レベルを見逃してしまいます...

htmlcsscross-browsertextselection
233
daviddarx
<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>
291
Jerome

更新2017年1月：

私は使用できます によると、user-selectは現在Internet Explorer 9以前のバージョンを除くすべてのブラウザでサポートされています（しかし残念ながらまだベンダーのプレフィックスが必要です）。

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

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

これは非標準の機能です（つまり、どの仕様にも含まれていません）。すべての場所で動作することが保証されているわけではなく、ブラウザ間で実装に違いがある可能性があり、将来的にはブラウザはそれをサポートしなくなる可能性があります。

より詳しい情報は Mozilla Developer Networkのドキュメント にあります。

253
Blowsie

ブラウザ間の互換性のためにこのCSSコードを試してください。

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
29
Nyxynyx

JavaScriptを使ってあなたが望むことをすることができます：


if (document.addEventListener !== undefined) {
  // Not IE
  document.addEventListener('click', checkSelection, false);
} else {
  // IE
  document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

Soap box：あなたは本当にこの方法でクライアントのユーザーエージェントに悩むべきではありません。クライアントが文書上のものを選択したい場合は、文書上のものを選択できるはずです。 あなたがハイライトカラーを好まないかどうかは関係ありません。なぜなら、あなたはドキュメントを表示しているのではないからです。

7
James Sumners

無効にできるかどうかはわかりませんが、色を変更できます。

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

それから色をあなたの「暗い」デザインに合わせて、何が起こるのか見てください:)

5
Kyle