Označení kódu nebo textu po kliknutí

Na webových stránkách o programování nebo u webových služeb, které nabízejí kód pro vložení na vlastní web, se můžeme setkat s chováním, kdy se celý kód označí po jediném kliknutí na něj.

Označení celého textu po 1 kliknutí

V případě, že se text umístí do <textarea>, stačí pouhé vyvolání selectu po kliknutí (onclick).

Označení celého obsahu <div>u

Nemá-li obsah k označení vypadat jako formulářové pole, první možnost je <textarea> přestylovat do podoby běžného obsahu a opět využít this.select().

V případě, že se má jednat o běžný neformulářový element, nabízí se:

Vlastnost selection

Pro získávání vybraného textu, ale i jeho označování slouží funkce selection. Použití označování obsahu se výrazně liší napříč prohlížeči.

Kód se po kliknutí označí.

Použít contenteditable

Teoreticky by ještě šlo využít toho, že pokud z elementu uděláme editovatelný obsah, můžeme nad ním využívat funkci selectAll. Ale použití selection se mi zdá rozumnější.

Po kliknutí se vše označí.

Výchozí chování

Při jakékoliv funkci, která mění výchozí chování prohlížeče, je třeba myslet na to, zda nenadělá více škody než užitku.

Co se týče označování textu, tak je běžné, že:

• jedno kliknutí neudělá nic,
• dvojklik označí slovo,
• trojklik označí odstavec.

Zavádění označování po jednom kliknutí či dvojkliku, tedy výchozí chování naruší. Mimo jiné zjednodušení výběru textu zcela znemožní používat dvojklik pro označení slova — tato nepěkná věc je k vidění třeba u kódů Nette dokumentace.

Proto je potřeba zvážit, zda v označovaného kódu/textu nebude někdo chtít označovat obvyklým způsobem.