Wie deaktiviere ich die Textauswahl mit jQuery?

Verfügt jQuery oder jQuery-UI über Funktionen zum Deaktivieren der Textauswahl für bestimmte Dokumentelemente?

In jQuery 1.8 kann dies wie folgt erfolgen:

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

Wenn Sie die jQuery-Benutzeroberfläche verwenden, gibt es dafür eine Methode, die jedoch nur die Mausauswahl verarbeiten kann (dh CTRL+ Afunktioniert noch):

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

Der Code ist wirklich einfach, wenn Sie die jQuery-Benutzeroberfläche nicht verwenden möchten:

$(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; });

Ich fand diese Antwort ( Verhindern des Hervorhebens der Texttabelle ) am hilfreichsten und kann möglicherweise mit einer anderen Methode zur Bereitstellung der IE-Kompatibilität kombiniert werden.

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

Hier ist eine umfassendere Lösung für die Auswahl der Trennung und das Löschen einiger Hotkeys (z. B. Ctrl+ aund Ctrl+ c. Test: Cmd + aund 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);

und Beispiel aufrufen:

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

jsfiddle.net/JBxnQ/

Dies könnte auch für alte Versionen von FireFox nicht ausreichen (ich kann nicht sagen, welche). Wenn dies alles nicht funktioniert, fügen Sie Folgendes hinzu:

.on('mousedown', false)

Folgendes würde die Auswahl aller Klassenelemente in allen gängigen Browsern (IE, Chrome, Mozilla, Opera und Safari) deaktivieren:

$(".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");
        });

Dies kann einfach mit JavaScript erfolgen. Dies gilt für alle Browser

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

Rufen Sie diese Funktion auf

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

Das ist eigentlich sehr einfach. Verwenden Sie einfach den folgenden jQuery-Code, um die Textauswahl zu deaktivieren (und auch auf + Ziehen von Text (z. B. einen Link in Chrome) zu klicken):

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

Dies verhindert lediglich, dass die Standardeinstellung auftritt, wenn Sie mit der Maus ( mousedown()) in die Tags bodyund klicken html. Sie können das Element sehr einfach ändern, indem Sie den Text zwischen den beiden Anführungszeichen ändern (z. B. ändern $('body, html')in $('#myUnselectableDiv'), um das myUnselectableDivdiv nicht auswählbar zu machen.

Ein kurzer Ausschnitt, um Ihnen dies zu zeigen / zu beweisen:

$('#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>

Bitte beachten Sie, dass dieser Effekt nicht perfekt ist und die beste Leistung erbringt, während das gesamte Fenster nicht auswählbar ist. Vielleicht möchten Sie auch hinzufügen

die Löschung einiger Hotkeys (wie Ctrl+aund Ctrl+c. Test: Cmd+a und Cmd+c)

auch, indem Sie diesen Abschnitt von Vladimir's Antwort oben verwenden. (gehe zu seinem Beitrag hier )

1-Zeilen-Lösung für CHROM:

body.style.webkitUserSelect = "none";

und FF:

body.style.MozUserSelect = "none";

IE erfordert das Setzen des Attributs "nicht auswählbar" (Details unten).

Ich habe dies in Chrome getestet und es funktioniert. Diese Eigenschaft wird vererbt. Wenn Sie sie für das Body-Element festlegen, wird die Auswahl in Ihrem gesamten Dokument deaktiviert.

Details hier: http://help.dottoro.com/ljrlukea.php

Wenn Sie Closure verwenden, rufen Sie einfach diese Funktion auf:

goog.style.setUnselectable(myElement, true);

Es behandelt alle Browser transparent.

Die Nicht-IE-Browser werden wie folgt behandelt:

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

Hier definiert: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

Der IE-Teil wird folgendermaßen behandelt:

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

Ich denke, dieser Code funktioniert in allen Browsern und erfordert den geringsten Overhead. Es ist wirklich eine Mischung aus all den oben genannten Antworten. Lassen Sie mich wissen, wenn Sie einen Fehler finden!

CSS hinzufügen:

.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 hinzufügen:

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

Optional: Um die Auswahl auch für alle untergeordneten Elemente zu deaktivieren, können Sie den IE-Block in Folgendes ändern:

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

Verwendung:

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

Ich habe alle Ansätze ausprobiert, und dieser ist der einfachste für mich, da ich IWebBrowser2 verwende und nicht mit 10 Browsern zu kämpfen habe:

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

Funktioniert perfekt für mich!

Eine Lösung hierfür besteht in geeigneten Fällen darin, a <button>für den Text zu verwenden, der nicht auswählbar sein soll. Wenn Sie clickin einem Textblock an das Ereignis gebunden sind und nicht möchten, dass dieser Text auswählbar ist, wird durch Ändern der Schaltfläche in eine Schaltfläche die Semantik verbessert und auch die Auswahl des Texts verhindert.

<button>Text Here</button>

Der beste und einfachste Weg, den ich gefunden habe, verhindert Strg + C, Rechtsklick. In diesem Fall habe ich alles blockiert, sodass ich nichts angeben muss.

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