PL
HTML - jak wyłączyć zaznaczanie tekstu?
6 points
W tym artykule chcielibyśmy pokazać, w jaki sposób używając HTML, JavaScript i CSS, można wyłączyć opcję zaznaczenia tekstu na dowolnym elemencie strony.
Poniższe rozwiązanie działa praktycznie w każdej przeglądarce. Blokuje ono opcję zaznaczania tekstu i różnych elementów, poprzez dodanie:
- klasy CSS (
disable-selectionzdefiniowana w przykładowym kodzie) - atrybutu
unselectable="on"(wymagany przez IE <10 i Opera <15) - zdarzenia
onselectstart="return false"(jest to dodatkowe zabezpieczenie dla przeglądarek Internet Explorer)
Uwagi:
- niektóre przeglądarki nadal nie obsługują właściwości
user-select(link do źródła), więc dla pełnej kompatybilności konieczne jest użycie wersji z prefiksami,- w CSS3, właściwość
user-selectnie jest częścią standardu - ma ona status wersji roboczej dla CSS4.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.disable-selection {7
touch-callout: none; /* iOS Safari */8
user-select: none; /* Safari */9
user-select: none; /* Konqueror HTML */10
user-select: none; /* Firefox w przeszłości (stare wersje) */11
user-select: none; /* Internet Explorer (>=10) / Edge */12
user-select: none; /* Aktualnie wspierane przez: */13
/* Chrome, Opera and Firefox */14
}15
16
div {17
margin: 10px;18
padding: 20px;19
}20
21
</style>22
</head>23
<body>24
<div class="disable-selection" 25
style="background: silver" 26
unselectable="on"27
onselectstart="return false">28
Tego tekstu nie można zaznaczyć ...29
</div>30
<div style="background: gold">31
Ten tekst można zaznaczyć ...32
</div>33
</body>34
</html>