jQueryを使用してテキスト選択を無効にする方法は？

jQueryまたはjQuery-UIには、特定のドキュメント要素のテキスト選択を無効にする機能がありますか？

jQuery 1.8では、これは次のように実行できます。

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

jQuery UIを使用する場合、そのためのメソッドがありますが、それはマウス選択のみを処理できます（つまり、CTRL+ Aは引き続き機能します）。

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

jQuery UIを使用したくない場合、コードは非常にシンプルです。

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

私はこの回答（テキストテーブルのハイライトを防ぐ）が最も役に立ち、おそらくIEとの互換性を提供する別の方法と組み合わせることができます。

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

これは、切断の選択と、一部のホットキー（Ctrl+ aやCtrl+などc。テスト： Cmd + aとCmd+ c）のキャンセルに対するより包括的なソリューションです。

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

例を呼び出す：

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

これはまた、FireFoxの古いバージョンでは十分ではない可能性があります（私にはわかりません）。これでうまくいかない場合は、以下を追加してください：

.on('mousedown', false)

次の例では、すべての一般的なブラウザー（IE、Chrome、Mozilla、Opera、Safari）ですべてのクラス「item」の選択を無効にします。

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);

        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });

これは、JavaScriptを使用して簡単に実行できます。これは、すべてのブラウザーに適用できます。

<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") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

この関数を呼び出す

<script type="text/javascript">
   disableSelection(document.body)
</script>

これは実際には非常に簡単です。テキストの選択を無効にするには（また、テキストをクリックしてドラッグすると（例：Chromeのリンク））、次のjQueryコードを使用します。

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

これmousedown()により、bodyおよびhtmlタグ内でマウス（）をクリックしたときにデフォルトが発生しなくなります。2つの引用符の間のテキストを変更するだけで、要素を非常に簡単に変更できます（たとえば、divを選択不可にするためにに変更$('body, html')します）。$('#myUnselectableDiv')myUnselectableDiv

これを表示/証明する簡単なスニペット：

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

この効果は完全なものではなく、ウィンドウ全体を選択不可にした状態で最高のパフォーマンスを発揮することに注意してください。追加することもできます

ホットキーの一部の除去（などCtrl+aとCtrl+c。試験： Cmd+aとCmd+c）

同様に、上記のウラジミールの回答のそのセクションを使用します。（彼の投稿はこちら）

Chromeの1行ソリューション：

body.style.webkitUserSelect = "none";

とFF：

body.style.MozUserSelect = "none";

IEでは、「選択不可」属性を設定する必要があります（詳細は下部にあります）。

私はこれをChromeでテストしましたが動作します。このプロパティは継承されるため、body要素に設定すると、ドキュメント全体での選択が無効になります。

詳細はこちら：http : //help.dottoro.com/ljrlukea.php

Closureを使用している場合は、次の関数を呼び出します。

goog.style.setUnselectable(myElement, true);

すべてのブラウザを透過的に処理します。

IE以外のブラウザは次のように処理されます。

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

ここで定義：http : //closure-library.googlecode.com/svn/!svn / bc /4/ trunk / closure / goog / docs / closure_goog_style_style.js.source.html

IE部分は次のように処理されます。

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

このコードはすべてのブラウザーで機能し、オーバーヘッドが最も少ないと思います。これは、実際には上記のすべての答えのハイブリッドです。バグを見つけたら教えてください！

CSSを追加：

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

jQueryを追加します。

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

オプション：すべての子要素の選択も無効にするには、IEブロックを次のように変更します。

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

使用法：

$('.someclasshere').disableSelection();

私はすべてのアプローチを試しましたが、IWebBrowser2を使用していて、10のブラウザーと競合しないため、これが最も簡単です。

document.onselectstart = new Function('return false;');

私には完璧に動作します！

これに対する適切なケースの1つの解決策は、<button>選択可能にしたくないテキストにを使用することです。click一部のテキストブロックのイベントにバインドしていて、そのテキストを選択可能にしたくない場合は、ボタンに変更すると、セマンティクスが向上し、テキストが選択されなくなります。

<button>Text Here</button>

私が見つけた最良かつ最も簡単な方法は、ctrl + cを防ぎ、右クリックします。この場合、すべてをブロックしたので、何も指定する必要はありません。

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});