Languages
[Edit]
PL

HTML - jak wyłączyć zaznaczanie tekstu?

3 points
Created by:
Sylwia
1334

 

Używając HTML, JavaScript i CSS można usunąć zaznaczenie tekstu w następujący sposób.

1. Przykład niestandardowej zgodności wstecznej

Takie podejście usuwa opcję zaznaczania tekstu (i nie tylko) z elementu, poprzez dodanie:

  • określona klasa (.disable-selection zdefiniowana w przykładowym kodzie)
  • unselectable="on" atrybut - wymagany przez IE <10 i Opera <15
  • onselectstart="return false;" - alternatywne rozwiązanie dla przeglądarki Internet Explorer

Uwagi: niektóre przeglądarki nadal nie obsługują właściwości user-select (pomocny link), więc dla pełnej funkcjonalności konieczne jest użycie prefiksów. Właściwość user-select nie jest częścią standardu - ma status roboczy 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 in the past (old versions) */
              -ms-user-select: none; /* Internet Explorer (>=10) / Edge    */
                  user-select: none; /* Currently supported:               */
                                     /* 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>

 

Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.