293

いくつかのページで、HTML/CSS/jQuery ギャラリーを作成しています。

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

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

そこで私の質問です: HTML でのテキスト選択を無効にすることはできますか? そうでなければ、フラッシュとそのテキストフィールドでの高レベルの構成が恋しいです...

4

5 に答える 5

341 
<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>
于 2010-09-23T14:44:02.143 に答える
326

2017 年 1 月の更新:

Can I useによると、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 のドキュメントを参照してください。

于 2012-02-16T15:53:18.957 に答える
35

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

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
于 2011-12-21T23:33:31.773 に答える
8

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

せっけん箱: このようにクライアントのユーザー エージェントを台無しにするべきではありません。クライアントがドキュメント上のものを選択したい場合は、ドキュメント上のものを選択できる必要があります。ドキュメントを表示しているのはあなたではないので、強調表示の色が気に入らなくても問題ありません。

于 2010-09-23T16:20:38.700 に答える
6

オフにできるかどうかはわかりませんが、色を変更できます:)

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

次に、色を「暗い」デザインに合わせて、何が起こるかを確認してください:)

于 2010-09-23T14:42:53.850 に答える