Zakázání 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.

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

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.

Odkazy jinam

• MDN: user-select
• Cam I Use: user-select
• Six Revisions: Disable Text Selection with CSS