Korzystając z CSS, można uniemożliwić użytkownikom zaznaczanie tekstu w elemencie za pomocą user-select: none. Teraz zrozumiałe jest, dlaczego takie postępowanie może być uważane za „kontrowersyjne”. To znaczy, powinien wyłączamy standardowe zachowania użytkowników? Ogólnie rzecz biorąc nie, nie powinniśmy tego robić. Ale czy wyłączenie zaznaczania tekstu ma jakieś uzasadnione (choć rzadkie) przypadki użycia? Tak myślę.
W tym artykule omówimy te przypadki użycia i przyjrzymy się, jak możemy ich używać user-select: none aby poprawić (a nie utrudniać) doświadczenia użytkowników. Nic też nie jest warte, że user-select nieruchomość ma poza tym inne wartości none która może być użyta do zmiany zachowania zaznaczania tekstu, a nie do całkowitego wyłączenia, oraz inna wartość, która nawet wymusza zaznaczanie tekstu, więc przyjrzymy się im również.
Możliwy user-select wartości
Zacznijmy od biegania przez inne user-select wartości i to, co robią.
Stosowanie user-select: none; do elementu oznacza, że jego zawartość tekstowa i zagnieżdżona zawartość tekstowa nie będzie funkcjonalna ani wizualnie zaznaczalna (np. ::selection nie zadziała). Jeśli dokonasz wyboru, który zawiera pewną zawartość nie do wyboru, zawartość, której nie można wybrać, zostanie pominięta w wyborze, więc jest dość dobrze zaimplementowana. A wsparcie jest świetne.
Te dane obsługi przeglądarki pochodzą z Mogę uzyć, który ma więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Stacjonarny
| Chrom | Firefox | IE | krawędź | Safari |
|---|---|---|---|---|
| 4* | 2* | 10 * | 12 * | 3.1 * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 105 | 104 | 2.1 * | 3.2 * |
Niekorzystnie, user-select: text umożliwia wybór treści. Użyjesz tej wartości do zastąpienia user-select: none.
user-select: contain jest ciekawa. Zastosowanie go oznacza, że jeśli selekcja zaczyna się w elemencie, to musi się również w nim kończyć, zawierając go. To, co dziwne, nie ma zastosowania, gdy zaczyna się selekcja zanim jednak element, i prawdopodobnie dlatego żadna przeglądarka go obecnie nie obsługuje. (Internet Explorer i wcześniejsze wersje Microsoft Edge wcześniej obsługiwały go pod przykrywką user-select: element.)
Z user-select: all, wybranie części zawartości elementu powoduje automatyczne zaznaczenie całej jej zawartości. To wszystko albo nic, co jest bardzo bezkompromisowe, ale przydatne w sytuacjach, gdy użytkownicy są bardziej skłonni do kopiowania treści do swojego schowka (np. udostępnianie i osadzanie linków, fragmentów kodu itp.). Zamiast klikać dwukrotnie, użytkownicy będą musieli kliknąć tylko raz, aby zawartość została wybrana automatycznie.
Bądź jednak ostrożny, ponieważ nie zawsze jest to funkcja, o której myślisz. Co jeśli użytkownicy chcą tylko wybrać? część treści (np. tylko część nazwy czcionki we fragmencie Google Fonts lub jedna część fragmentu kodu)? Nadal lepiej sobie radzić ”skopiuj do schowka” za pomocą JavaScript w wielu scenariuszach.
Lepsze zastosowanie user-select: all jest zapewnienie, że cytaty są kopiowane w całości i dokładnie.
Zachowanie user-select: auto (wartość początkowa user-select) zależy od elementu i sposobu jego użycia. Więcej na ten temat dowiesz się w nasz almanach.
Przejdźmy teraz do zbadania przypadków użycia user-select: none...
Usuwanie nietekstu z zaznaczenia
Kiedy kopiujesz treść ze strony internetowej, prawdopodobnie pochodzi ona z artykułu lub innego rodzaju treści o długiej formie, prawda? Prawdopodobnie nie chcesz, aby Twój wybór zawierał obrazy, emotikony (które czasami mogą być kopiowane jako tekst, np. „:thinkingface:”) i inne rzeczy, których możesz się spodziewać w <aside> element (np. wezwania do działania w artykule, reklamy lub coś innego, co nie jest częścią głównej treści).
Aby zapobiec uwzględnianiu czegoś w zaznaczeniach, upewnij się, że jest ono opakowane w element HTML, a następnie zastosuj user-select: none do tego:
<p>lorem <span style="user-select: none">🤔</span> ipsum</p>
<aside style="user-select: none">
<h1>Heading</h1>
<p>Paragraph</p>
<a>Call to action</a>
</aside>W takich scenariuszach nie wyłączamy selekcji, ale raczej optymalizacji to. Warto również wspomnieć, że wybieranie niekoniecznie oznacza kopiowanie — wielu czytelników (w tym ja) lubi wybierać treści podczas czytania, aby mogli zapamiętać, gdzie się znajdują (jak zakładka), kolejny powód do optymalizacji, a nie całkowitego wyłączenia.
Zapobieganie przypadkowemu wyborowi
Aplikuj user-select: none do linków wyglądających jak przyciski (np. <a href="/pl/whatever" class="button">Click Me!</a>).
Nie można wybrać treści tekstowej z <button> or <input type="submit"> ponieważ, cóż, dlaczego miałbyś? Jednak to zachowanie nie dotyczy łączy, ponieważ tradycyjnie stanowią one część akapitu, który powinien być zaznaczany.
Słusznie.
Moglibyśmy się z tym kłócić sprawianie, by linki wyglądały jak przyciski, to antywzór, ale cokolwiek. To nie łamanie internetu, prawda? Ten statek i tak odpłynął, więc jeśli używasz linków zaprojektowanych tak, aby wyglądały jak przyciski, powinny one naśladować zachowanie przycisków, nie tylko ze względu na spójność, ale także aby zapobiec przypadkowemu wybraniu treści przez użytkowników zamiast wyzwalania interakcji.
Z pewnością mam skłonność do przypadkowego wybierania rzeczy, ponieważ używam laptopa w łóżku częściej, niż chciałbym przyznać. Ponadto istnieje kilka schorzeń, które mogą wpływać na kontrolę i koordynację, zmieniając zamierzone kliknięcie w niezamierzone przeciągnięcie/wybór, więc istnieją problemy z dostępnością, które można rozwiązać za pomocą user-select też.
Interakcje, które wymagają przeciągania (celowo) oczywiście istnieją (np. w grach przeglądarkowych), ale są to rzadkie. Jednak to tylko pokazuje, że user-select w rzeczywistości ma sporo przypadków użycia.
Unikanie kradzieży płatnych treści
Treści płatne są bardzo nienawidzone, ale jeśli uważasz, że musisz chronić swoje treści, to są to Twoje treści — nikt nie ma prawa ich ukraść tylko dlatego, że nie wierzy, że powinien za to płacić.
Jeśli chcesz iść tą drogą, istnieje wiele sposobów, aby utrudnić użytkownikom omijanie zapór (lub podobnie kopiowanie treści chronionych prawem autorskim, takich jak opublikowane prace innych osób).
Zamazywanie treści za pomocą CSS:
article { filter: blur(<radius>); }Wyłączanie skrótów klawiaturowych dla DevTools:
document.addEventListener("keydown", function (e) {
if (e.keyCode == 123) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});Wyłączenie dostępu do DevTools poprzez menu kontekstowe poprzez wyłączenie samego menu kontekstowego:
document.addEventListener("contextmenu", e => e.preventDefault())I oczywiście, aby uniemożliwić użytkownikom kopiowanie treści, gdy nie wolno im czytać jej u źródła, należy złożyć wniosek user-select: none:
<article style="user-select: none">Jakieś inne przypadki użycia?
To są trzy przypadki użycia, o których mogłem pomyśleć, aby zapobiec zaznaczaniu tekstu. Kilka innych przemknęło mi przez głowę, ale wszystkie wydawały się naciągane. Ale co o tobie? Czy musiałeś w czymś wyłączyć zaznaczanie tekstu? Chciałbym wiedzieć!
