Zákaz výběru textu na webu - Začínáme s HTML

vydáno: 24.08.2016, seriál: Začínáme s HTML

Toto je 22. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.

Tip1 Zákaz kopírování textu nelze garantovat a nelze mu 100% nijak zabránit, pouze znepříjemnit.

Přes CSS

První možností je zakázat výběr textu přes CSS. K tomuto účelu slouží user-select. V následující ukázce lze vidět praktické použití. Nadefinovat user-select pro Chrome a FireFox je opravdu nutné, jinak příklad nefunguje.

Zobrazit ukázku

Ukázka:

CSS

.neoznacovat {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#sloupec {
  width: 800px;
  height: 300px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #000;
}

Použité vlastnosti: width, height, margin, padding, border

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Zákaz výběru textu</title>

</head>

<body>

<div id="sloupec">

  <p class="neoznacovat">Tento text nelze vybrat, protože je blokovaný proti výběru.</p>

</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>

HTML zápis

Druhou možností jak zabránit výběru textu je HTML atribut unselectable. Bohužel nefunguje ve FireFoxu. Určen je pro Internet Explorer a Operu od verze 12.

Zobrazit ukázku

Ukázka:

CSS

#sloupec {
  width: 800px;
  height: 300px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #000;
}

Použité vlastnosti: width, height, margin, padding, border

HTML

<!DOCTYPE html>

<html lang="cs-CZ">

<head>

<meta charset="utf-8">

<title>Horizontální centrování textu</title>

</head>

<body>

<div id="sloupec">

  <p unselectable="on">Zákázání výběru textu přes HTML atribut.</p>

</div>

</body>

</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>

CSS: návody na kaskádovité styly

HTML: návody jak psát html tagy

Témata

Seriály

Zákaz výběru textu na webu - Začínáme s HTML

Přes CSS

HTML zápis

Seriál Začínáme s HTML

Seznam všech článků seriálu: