Označení textu kliknutím

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.

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ářů ↓

Jak vytvořit WYSIWYG editor

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

AJAX

AJAX

Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.

Komentáře