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.
Przykład praktyczny
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.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox w przeszłości (stare wersje) */
-ms-user-select: none; /* Internet Explorer (>=10) / Edge */
user-select: none; /* Aktualnie wspierane przez: */
/* Chrome, Opera and Firefox */
}
div {
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="disable-selection"
style="background: silver"
unselectable="on"
onselectstart="return false">
Tego tekstu nie można zaznaczyć ...
</div>
<div style="background: gold">
Ten tekst można zaznaczyć ...
</div>
</body>
</html>