Vraag Hoe de selectie van tekstselectie uit te schakelen?


Voor ankers die als knoppen werken (bijvoorbeeld vragen, Tags, gebruikers, enz. bovenaan de Stack Overflow-pagina) of tabbladen, is er een standaardmethode voor CSS om het highlighting-effect uit te schakelen als de gebruiker per ongeluk de tekst selecteert?

Ik besefte dat dit met JavaScript kon, en een beetje googlen leverde de Mozilla-only op -moz-user-select keuze.

Is er een standaard-compliant manier om dit met CSS te bereiken, en zo nee, wat is de "best practice" -aanpak?


4350
2018-05-05 20:29


oorsprong


antwoorden:


UPDATE januari 2017:

Volgens Kan ik gebruiken, de user-select wordt momenteel ondersteund in alle browsers behalve Internet Explorer 9 en eerdere versies (maar helaas nog steeds heeft een voorvoegsel van een leverancier nodig).


Alle correcte CSS-varianten zijn:

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


Merk op dat het een is niet-standaard functie (d.w.z. geen deel van enige specificatie). Het is niet gegarandeerd om overal te werken, en er kunnen verschillen zijn in de implementatie van browsers en in de toekomst kunnen browsers daar ondersteuning voor achterwege laten.


Meer informatie is te vinden in Mozilla Developer Network-documentatie.


6360
2017-12-05 11:45



In de meeste browsers kan dit worden bereikt met behulp van bedrijfseigen variaties op de CSS user-select eigendom, oorspronkelijk voorgesteld en vervolgens verlaten in CSS3 en nu voorgesteld in CSS UI niveau 4:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Voor IE <10 en Opera <15, moet u de unselectable attribuut van het element dat u niet selecteerbaar wilt maken. U kunt dit instellen met behulp van een attribuut in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Helaas is deze eigenschap niet geërfd, wat betekent dat je een attribuut in de starttag van elk element in de <div>. Als dit een probleem is, kunt u in plaats daarvan JavaScript gebruiken om dit recursief voor de afstammelingen van een element te doen:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Update 30 april 2014: Deze tree traversal moet opnieuw worden uitgevoerd wanneer een nieuw element aan de boom wordt toegevoegd, maar uit een opmerking van @Han blijkt dat het mogelijk is om dit te voorkomen door toevoegen van een mousedown gebeurtenishandler die wordt ingesteld unselectable op het doelwit van het evenement. Zien http://jsbin.com/yagekiji/1 voor details.


Dit heeft nog steeds geen betrekking op alle mogelijkheden. Hoewel het onmogelijk is om selecties in niet-selecteerbare elementen te initiëren, is het in sommige browsers (bijvoorbeeld IE en Firefox) nog steeds onmogelijk om selecties te voorkomen die vóór het einde van het niet-selecteerbare element beginnen en eindigen zonder dat het hele document niet meer selecteerbaar is.


727
2017-11-13 16:05



Een JavaScript-oplossing voor IE is

onselectstart="return false;"

165
2018-05-05 20:37



Tot CSS 3's user-select eigendom komt beschikbaar, Gekko-gebaseerde browsers ondersteunen de -moz-user-select onroerend goed dat je al hebt gevonden. WebKit en op Blink gebaseerde browsers ondersteunen de -webkit-user-select eigendom.

Dit wordt natuurlijk niet ondersteund in browsers die de Gecko rendering-engine niet gebruiken.

Er is geen snelle en gemakkelijke manier om dit te doen; JavaScript gebruiken is een optie.

De echte vraag is, waarom wilt u dat gebruikers bepaalde elementen niet kunnen markeren en vermoedelijk kopiëren en plakken? Ik ben nog geen keer tegengekomen dat ik gebruikers geen bepaald gedeelte van mijn website wilde laten markeren. Verscheidene van mijn vrienden zullen, na vele uren lezen en schrijven van code, de highlight-functie gebruiken als een manier om te onthouden waar op de pagina ze stonden, of om een ​​marker te voorzien zodat hun ogen weten waar ze moeten kijken.

De enige plek waar ik dit nuttig zou kunnen zien, is als je knoppen voor formulieren hebt die niet mogen worden gekopieerd en geplakt als een gebruiker de website kopieert en plakt.


159
2018-05-24 21:24



Als u de tekstselectie op alles behalve op wilt uitschakelen <p> elementen, je kunt dit doen in CSS (kijk uit voor de -moz-none die override in subelementen toestaat, wat is toegestaan ​​in andere browsers met none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



In de bovenstaande oplossingen wordt de selectie gestopt, maar de gebruiker denkt nog steeds dat u tekst kunt selecteren omdat de cursor nog steeds verandert. Om het statisch te houden, moet je je CSS-cursor instellen:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Hierdoor wordt uw tekst volledig vlak, zoals in een desktoptoepassing.


111
2018-05-05 20:46



U kunt dit doen in Firefox en Safari (ook Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

101
2017-09-21 07:09



Tijdelijke oplossing voor WebKit:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

Ik vond het in een CardFlip-voorbeeld.


73
2017-11-11 19:53



Ik hou van de hybride CSS + jQuery-oplossing.

Alle elementen erin maken <div class="draggable"></div> niet selecteerbaar, gebruik deze CSS:

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

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

En als je jQuery gebruikt, voeg je dit toe in a $(document).ready() blok:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Ik denk dat je nog steeds wilt dat inputelementen interactief kunnen zijn, vandaar de :not() pseudo-selector. Je zou kunnen gebruiken '*' in plaats daarvan, als het je niet uitmaakt.

Waarschuwing: IE9 heeft dit extra jQuery-stuk misschien niet nodig, dus misschien wilt u daar een versiecontrole toevoegen.


66
2018-05-01 11:36



.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Het is echter niet de beste manier.


62
2017-12-23 14:05



Voor Internet Explorer moet u bovendien toevoegen pseudo klasse focus (.ClassName: focus) en outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style:none;/*IE*/
}

58
2018-02-27 09:01