Wie deaktiviere ich die Textauswahl mit jQuery?

198

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

Dawid Ohia
quelle
3
Mögliches Duplikat: stackoverflow.com/questions/1319126/prevent-highlight-of-text
Jørn Schou-Rode
@ John: Beantwortet der obige Link Ihre Frage? Wenn dies nicht der Fall ist, möchten Sie möglicherweise detaillierter erläutern, wie sich Ihre Situation unterscheidet.
Jørn Schou-Rode
1
Ja tut es. Aber obwohl die Antwort dieselbe ist, ist diese Frage sehr spezifisch, so dass viele diese Antwort übersehen können, wenn sie eine allgemeinere Frage berücksichtigen (wie ich).
Dawid Ohia
@Jhon: Die andere Frage hat auch eine jQuery-Lösung.
Omar Abid

Antworten:

274

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);
SLaks
quelle
1
Die JavaScript-Alternative funktioniert nur für IE. "onselectstart" ist nicht für andere Browser verfügbar
Omar Abid
13
@Omar: Das weiß ich sehr gut.
SLaks
11
Danke dafür. Ich habe an einem Drag-Slider gearbeitet und brauchte eine Möglichkeit, dass Text dabei nicht ausgewählt wird.
Spencer Ruport
35
Für diejenigen unter Ihnen, die "einfach nicht" sagen, um die Textauswahl (oder irgendetwas anderes auf SO) zu deaktivieren, öffnen Sie Ihren Geist nur ein wenig. Oft wird es aus ästhetischen Gründen deaktiviert, z. B. um die Textauswahl durch einen Doppelklick auf ein Etikett mit Text zu vermeiden usw. Beantworten Sie also entweder die Frage oder geben Sie einen tatsächlichen Kontrapunkt an und geben Sie an, wovon Sie negieren Kratzen Sie die Idee nicht nur allgemein aus.
Dudewad
102

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; });
Damien
quelle
1
Die jquery ui-Funktion wäre großartig, bietet jedoch nicht das gleiche Schutzniveau, verhindert jedoch die direkte Auswahl von Dingen. Wenn Sie jedoch eine Auswahl von einem anderen dom-Objekt ausführen, benötigen Sie auch die CSS-Regeln - hier ist die Funktion = function () {return this.bind (($ .support.selectstart? "selectstart": "mousedown") + ".ui-disableSelection", function (event) {event.preventDefault ();}); }
Chrismarx
2
Beachten Sie, dass disableSelection () in jQuery UI 1.9
10.
Abhängig von Ihrem Browser kann es auch erforderlich sein, dass .on ('mousedown', false) funktioniert. Hovewer, es ist gefährlich, Mousedown-Ereignisse standardmäßig zu beenden, da dies wahrscheinlich die vorhandene Funktionalität beeinträchtigen könnte
Dan
1
Arg. Es ist ärgerlich, dass es abgeschrieben wurde. Es gibt viel Zeit, wenn Sie dies legitim wollen.
Chuck Le Butt
Ich erstelle ein Kontextmenü mit der rechten Maustaste für einen Ankertext und möchte nicht, dass der Text beim Klicken ausgewählt wird. Also ja, @Monk, dies wäre ein legitimes Beispiel.
Wayne Smallman
75

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;
}
Plynx
quelle
Chrome verwendet -webkit-user-select
tim
3
Schätzen Sie immer die CSS-Methode, um Dinge zu tun, anstatt jQuery oder JS im Allgemeinen zu verwenden. Genau wie bei jQuery-Animationen und CSS-Übergängen wird der in den Browser integrierte Weg immer der beste und effizienteste sein.
Brian Leishman
17

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)
Vladimir
quelle
3
Warum rufst du attr('unselectable', 'on')zweimal an? Ist es ein Tippfehler oder ist es nützlich?
KajMagnus
Das hat bei mir gut funktioniert, aber ich musste die ".each (function () {$ (this) .attr ('unselectable', 'on') .bind ('selectstart', function () {return false;} deaktivieren );}); " Abschnitt für meine spezielle Web-App (JQuery Mobile), nur für den Fall, dass es jemandem hilft ..
Anthony
13

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);
Arvid Vermote
quelle
1
Nicht kompliziert - ausgezeichnet! Danke dir. Für Behinderte; Ich fügte hinzu .attr ('deaktiviert', 'deaktiviert')
freewill
Update: Anstelle von .attr ('disabled', 'disabled') habe ich .attr ('readonly', 'readonly') verwendet. Deaktiviert verhindert das Posten meiner Modellvariablen in MVC (Modellvariable ist null). Readonly haben immer noch deaktiviert (ich benutze Bootstrap) und es ermöglicht das Posten des Artikelwerts
freewill
Ausgezeichneter Bruder, ich benutze diesen Code, um "
Zeigerereignisse
8
        $(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");
        });
Hirschjäger
quelle
Könnten Sie zusätzlich zum Code eine kurze Zusammenfassung der Antwort schreiben?
Jonsca
6

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>
Code Spy
quelle
Dieser ist großartig! Aber wie stoppen wir den "Fokus" darauf?
mutanic
3
Diese Antwort ist bis 2013 veraltet
Dan
6

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 )

Zach Barham
quelle
1

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);
  }
}
user1415855
quelle
1

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();
Justin
quelle
1

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!

Dave
quelle
0

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>
Nigel B. Peck
quelle
-1

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');
});
Marcelo Rocha
quelle