Pytanie Jak wyłączyć podświetlanie zaznaczania tekstu?


Dla kotwic, które działają jak przyciski (na przykład pytania, Tagi, Użytkownicyitp. na górze strony przepełnienia stosu) lub kart, czy istnieje standardowy sposób CSS wyłączenia efektu podświetlania, jeśli użytkownik przypadkowo wybierze tekst?

Zdaję sobie sprawę, że można to zrobić za pomocą JavaScript, a trochę googlowania przyniosło tylko Mozillę -moz-user-select opcja.

Czy istnieje sposób zgodny z normą, aby osiągnąć ten cel za pomocą CSS, a jeśli nie, jakie jest podejście "najlepszej praktyki"?


4360
2018-05-05 20:29


pochodzenie


Czy elementy w elemencie czarownicy mają wyłączone podświetlanie, czy wyróżnienie włączone w css w atrybucie style lub class? lub innymi słowy, czy istnieją inne wartości dla -webkit-user-select ect. inne niż tylko brak?
"user-select" - Wartości: brak | tekst | przełączać | element | elementy | wszystkie | dziedzicz - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
uihacker.blogspot.com/2011/12/... - Enve
Związane z: stackoverflow.com/questions/16600479/... = jak zezwolić na wybór tylko niektórych elementów podrzędnych - JK.
W niektórych przeglądarkach pojawia się błąd, w którym "Wybierz wszystko" (CTRL + A i CMD + A) wciąż wybiera rzeczy. Można to zwalczać za pomocą przezroczystego koloru wyboru: ::selection { background: transparent; } ::-moz-selection { background: transparent; } - DaAwesomeP


Odpowiedzi:


AKTUALIZACJA styczeń 2017 r .:

Według Mogę uzyć, user-select jest obecnie obsługiwany we wszystkich przeglądarkach z wyjątkiem Internet Explorera 9 i wcześniejszych wersji (ale niestety nadal potrzebuje prefiksu dostawcy).


Wszystkie poprawne odmiany CSS to:

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


Zauważ, że to jest niestandardowa funkcja (tj. nie jest częścią żadnej specyfikacji). Nie można zagwarantować, że będzie działać wszędzie, i mogą występować różnice w implementacji między przeglądarkami, aw przyszłości przeglądarki mogą porzucić wsparcie dla niego.


Więcej informacji można znaleźć w Dokumentacja Mozilli Developer Network.


6369
2017-12-05 11:45



fajny kod molokoloco: D, chociaż osobiście dobrze bym z niego nie korzystał, ponieważ czasami możesz potrzebować wartości różnych dla różnych przeglądarek, a to zależy od JavaScript. Tworzenie klasy i dodawanie jej do twojego elementu lub stosowanie css do twojego rodzaju elementu w twoim arkuszu stylów jest dość kuloodporne. - Blowsie
"user-select" - Wartości: brak | tekst | przełączać | element | elementy | wszystkie | dziedzicz - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
Właściwie -o-user-select nie jest zaimplementowane w Operze. W zamian za to implementuje nieekrywalny atrybut IE. - Tim Down
Z jakiegoś powodu samo to nie działało w IE8, dodałem wtedy <div onselectstart="return false;"> do mojego głównego div. - robasta
to jest niedorzeczne! tak wiele różnych sposobów robienia tego samego. Zróbmy nowy standard dla wyboru użytkownika. nazwiemy to standard-user-select. wtedy nie będziemy mieli tych problemów. chociaż dla kompatybilności wstecznej powinniśmy dołączyć także inne. więc teraz kod staje się -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. Ach, znacznie lepiej. - Claudiu


W większości przeglądarek można to osiągnąć za pomocą zastrzeżonych wersji CSS user-select własność, pierwotnie zaproponowany, a następnie porzucony w CSS3 i teraz proponowane w Interfejs użytkownika CSS Level 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;
}

Dla IE <10 i Opery <15, będziesz musiał użyć unselectable atrybut elementu, który chcesz wyłączyć. Możesz ustawić to za pomocą atrybutu w HTML:

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

Niestety ta właściwość nie jest dziedziczona, co oznacza, że ​​musisz umieścić atrybut w tagu początkowym każdego elementu wewnątrz <div>. Jeśli jest to problem, możesz zamiast tego użyć JavaScript, aby wykonać rekursywnie dla potomków elementu:

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

Aktualizacja 30 kwietnia 2014 r: To przejście drzewa musi zostać ponownie uruchomione po dodaniu nowego elementu do drzewa, ale z komentarza @Han wynika, że ​​można tego uniknąć przez dodawanie mousedown program obsługi zdarzeń, który ustawia unselectable na cel wydarzenia. Widzieć http://jsbin.com/yagekiji/1 dla szczegółów.


To nadal nie obejmuje wszystkich możliwości. Chociaż niemożliwe jest inicjowanie selekcji w nieobsługiwanych elementach, w niektórych przeglądarkach (na przykład IE i Firefox) nadal niemożliwe jest uniemożliwienie wyborów, które rozpoczynają się przed i kończą po tym, jak nie można wybrać elementu, bez konieczności wyłączenia całego dokumentu.


727
2017-11-13 16:05



powinieneś usunąć selektor * ze swojego przykładu, jest naprawdę nieefektywny i czy naprawdę nie ma potrzeby używania go w twoim przykładzie? - Blowsie
@Blowsie: Nie sądzę: specyfikacja CSS 2 stwierdza, że *.foo i .foo są dokładnie równoważne (w drugim przypadku uniwersalny selektor (*) jest domniemane), więc nie wykluczam dziwactwa przeglądarki, nie widzę, że w tym * zaszkodzi wydajności. To mój długotrwały nawyk obejmowania *, które pierwotnie zacząłem robić dla czytelności: wyraźnie stwierdza na pierwszy rzut oka, że ​​autor zamierza dopasować wszystkie elementy. - Tim Down
oooh po jakimś dalszym czytaniu wydaje się, że * jest nieskuteczne tylko wtedy, gdy używa się go jako klucza (najdalszy selektor), czyli .unselectable *. Więcej informacji tutaj code.google.com/speed/page-speed/docs/... - Blowsie
Zamiast używać klasy = "unselectable", po prostu użyj selektora atrybutów [unselectable = "on"] {...} - Chris Calo
@Francisc: Nie. Jak już powiedziałem do Blowsie wcześniej w komentarzach, nie ma tu żadnej różnicy. - Tim Down


Rozwiązaniem JavaScript dla IE jest

onselectstart="return false;"

165
2018-05-05 20:37



Nie zapomnij o ondragstart! - Mathias Bynens
jeszcze jedna rzecz tutaj. Jeśli dodasz to do ciała, nie będziesz w stanie wybrać tekstu wewnątrz pól tekstowych lub pól wejściowych w IE. Sposób, w jaki naprawiłem to dla IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; } - TheBrain
Można to dodać jako atrybut za pomocą jQuery - $ ("p"). Attr ("onselectstart", "return false") To była jedyna niezawodna metoda dla mnie w IE8 - Matt
dlaczego używam javascript, gdy mam wiele rozwiązań css! .. - Abudayah
@Abudayah, ponieważ nie działają w starszych wersjach Internet Explorera? To jest, jak, cały punkt tej odpowiedzi. - Pekka 웃


Do wersji CSS 3 wybierz użytkownika właściwość staje się dostępna, Gekonoparte na przeglądarce obsługują -moz-user-select Właściwość, którą już znalazłeś. WebKit i przeglądarki oparte na Blink wspierają -webkit-user-select własność.

To oczywiście nie jest obsługiwane w przeglądarkach, które nie korzystają z silnika renderującego Gecko.

Nie ma szybkiej i łatwej metody "standardowej", aby to zrobić; używanie JavaScript jest opcją.

Prawdziwe pytanie brzmi: dlaczego użytkownicy nie mogą podkreślać i przypuszczalnie kopiować i wklejać niektóre elementy? Nie spotkałem się z nikim, że nie chciałem pozwolić użytkownikom na podkreślenie pewnej części mojej witryny. Kilku moich znajomych, po spędzeniu wielu godzin na czytaniu i pisaniu kodu, wykorzysta funkcję podświetlania jako sposób na zapamiętanie, gdzie na stronie byli, lub dostarczenie markera, aby ich oczy wiedziały, gdzie szukać dalej.

Jedyne miejsce, w którym mogłem zobaczyć, że jest użyteczne, to jeśli masz przyciski formularzy, które nie powinny być kopiowane i wklejane, jeśli użytkownik skopiuje i wklei stronę.


159
2018-05-24 21:24



Przypadek z rzeczami byłby dokładnie moją motywacją. - Kriem
Innym powodem, dla którego jest to potrzebne, jest klikanie z wciśniętym klawiszem Shift w celu wybrania wielu wierszy w siatce lub tabeli. Nie chcesz podświetlać tekstu, chcesz go wybrać wiersze. - Gordon Tucker
Istnieją również problemy prawne, w których zawartość innej osoby jest legalnie publikowana, ale klauzula w licencji wymaga od wydawców stron internetowych zapobiegania kopiowaniu i wklejaniu tekstu. To właśnie doprowadziło mnie do znalezienia tego pytania. Nie zgadzam się z tym wymogiem, ale firma, z którą kontraktuję, jest prawnie zobowiązana do takiego wdrożenia. - Craig M
@CraigM Styl css nie powstrzymuje osoby przed przechwyceniem źródła HTML i skopiowaniem go. Jeśli chcesz chronić swoje treści, musisz znaleźć lepsze sposoby. - Agile Jedi
Bardzo interaktywna aplikacja internetowa z wieloma funkcjami przeciągania i upuszczania ... przypadkowe wyróżnianie to duży problem z użytecznością. - Marc Hughes


Jeśli chcesz wyłączyć zaznaczanie tekstu we wszystkim oprócz opcji włącz <p> elementy, możesz to zrobić w CSS (uważaj na -moz-none co pozwala na przesłonięcie podelementów, co jest dozwolone w innych przeglądarkach 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



Upewnij się, że możesz również wybrać pola do wprowadzania: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - joshuadelange
Bądź bardzo ostrożny, jeśli chodzi o wyłączanie oczekiwań UI przeglądarki pod kątem WSZYSTKIEGO kodu, z wyjątkiem jednego elementu. Co na przykład z tekstem listy <li /> tekstu? - Jason T Featheringham
Tylko aktualizacja ... według MDN od czasu Firefoksa 21 -moz-none i none są takie same. - Kevin Fegan
Do tego możesz dodać kursor: domyślny i kursor: tekst odpowiednio:) - T4NK3R
Wspaniale! Działa dzięki! - Nam Nguyen


W powyższych rozwiązaniach wybór zostaje zatrzymany, ale użytkownik nadal uważa, że ​​możesz wybrać tekst, ponieważ kursor wciąż się zmienia. Aby zachować ją statycznie, musisz ustawić kursor CSS:

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

Spowoduje to, że tekst będzie zupełnie płaski, tak jak w aplikacji komputerowej.


111
2018-05-05 20:46



"Płaskie" w przeciwieństwie do czego? - kojow7


Możesz to zrobić w Firefoksie i Safari (również Chrome?)

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

101
2017-09-21 07:09



Nie polecałbym tego, ponieważ to nie naprawia problemu; wyłączenie zaznaczania tekstu - po prostu go ukrywa. Może to prowadzić do złej użyteczności, ponieważ jeśli przeciągnę kursor po stronie, mogę wybrać dowolny dowolny tekst, nie wiedząc o tym. Może to powodować wszelkiego rodzaju dziwne błędy "użyteczności". - Keithamus
Nie działa na obrazach PNG z przezroczystymi obszarami: zawsze będzie wybierany w jasnoniebieskim ... Jakiekolwiek obejście? - AvL


Obejście dla WebKit:

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

Znalazłem go w przykładzie CardFlip.


73
2017-11-11 19:53



Za pomocą transparent zamiast rgba działa również w Chrome 42 na Androida. - Clint Pachl