Jak zakázat označování textu

Na webové stránce je běžné, že jde její textový obsah označovat. Většinou je možnost označování dobrá, protože návštěvník si čas od času může chtít nějaké slovo označit a vyhledat vyhledávačem nebo zkrátka zkopírovat někam jinam.

V případě ovládacích prvků je ale označování někdy nežádoucí.

Text některých ovládacích prvků, kde se očekává, že na ně uživatel klikne, jako je odkaz nebo tlačítko, proto obvykle nejdou v prohlížečích označit standardním způsobem tažením kursoru myši.

Text odkazu

Ve většině prohlížečích jde text odkazu označit při tažení myší v místě nad odkazem. Označit text tlačítka jde potom snad jedině v Chrome / nové Opeře 15+.

Atribut unselectable

Do Opery 12 a v Internet Explorerech zamezí označování atribut unselectable s hodnotou on.

<p unselectable="on">
  Obsah nepůjde vybrat.
  <span>Toto vybrat půjde</span>
</p>

Zakázání výběru se nevztahuje na potomky elementu s unselectable, takže ve výše uvedeném kódu by obsah <span>u šel normálně označit.

Asi nejsnazší řešení tohoto problému je projití všech potomků s unselectable a doplnění tohoto atributu pro všechny potomky JavaScriptem.

CSS vlastnost user-select

Zamezit označování jde i CSS vlastností user-select: none. Následujícím zápisem tak jde doplnit podporu unselectable="off" do Firefoxu, Chrome 6+ a Opery 15+. V IE 10 a IE 11 potom fungují oba postupy (HTML atribut i CSS vlastnost).

[unselectable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

Ukázka znemožnění výběru

Tučný obsah odstavce nejde označit.

Chování napříč prohlížeči je hodně proměnlivé.

  • Ve Firefoxu nejde text označit ani zkopírovat.
  • V ostatních prohlížečích se při začátku označování mimo zakázaný element povede obsah označit. V Chrome se v takovém případě na zablokovaném elementu označení neprojeví jen visuálně, při zkopírování se do schránky dostane i neoznačitelný obsah.

Kdy označení zakázat

Měnit výchozí chování prohlížeče (tj. text jde označit) bývá většinou spíš na škodu. Rozhodně není dobré se tímto způsobem snažit bránit před kopírováním obsahu.

Nemožnost označit text může být pro návštěvníka dost frustrující. Zakazovat výběr by proto mělo následovat až v případě, kdy se při běžném používání aplikace něco nechtěně označuje.

Zákaz označování se hodí hlavně u prvků, které něco dělají při onclicku a nejsou to odkazy nebo tlačítka. Při rychlém kliknutí vícekrát po sobě by se potom označoval text, což nepůsobí dobře.

Chování u běžného <span>u, který při kliknutí mění svou barvu, jde pozorovat na následující ukázce.

„Tlačítko“ bez zakázání výběru

Zakázání výběru

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Stylování atributu title

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

Četnost CSS vlastností

Nejpoužívanější CSS vlastnosti

Žebříček CSS vlastností dle jejich četnosti na webových stránkách.

Převod inline CSS na externí

Převod CSS v HTML na externí styly

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Komentáře