JavaScript a data ve schránce Windows

Javascript je na mnohé věci nepostradatelný, jedním z příkladů je právě práce s daty systémové schránky. Zde najdete kompletní popis práce s těmito daty, od kopírování až po vkládání textu ze schránky do stránky, včetně příkladů využití funkcí execCommand. Popsané metody jsou funkční pouze v prohlížečích IE, pro jiné ekvivalent prozatím neexistuje.

Kopírování textu do schránky

Ke všem těmto trikům budeme využívat vlastnost document.execCommand(parametr) , kde se parametr rovná požadované akci schránky. Pro zkopírování textu do schránky použijeme vlastnost Copy, výsledná syntaxe bude document.execCommand("Copy").
Ukázka zdrojového kódu scriptu:

<script type=“text/javascript“ language=“JavaScript“>
function kopirovat()
{document.execCommand(„Copy“)}
</script>
<form>
<input type=“button“ value=“Zkopíruj do schránky“ onclick=“copy.select();kopirovat()“ />
<!–vysvětlení: po kliknutí dojde k označení textu v oblasti s názvem copy a dojde ke vložení dat do schránky–>
<textarea cols=50 name=“copy“>Po kliknutí na toto tlačítko dojde k označení tohoto textu a zkopírování do schránky</textarea></form>

Ukázka:

Vyjmutí textu a vložení do schránky

Opět požijeme vlastnost document.execCommand(parametr), přičemž za parametr dosadíme Cut. Výsledná syntaxe bude document.execCommand("Cut").
Ukázka zdrojového kódu scriptu:

<script type=“text/javascript“ language=“JavaScript“>
function vyjmout()
{document.execCommand(„Cut“)}
</script>
<form>
<input type=“button“ value=“Vyjmout“ onclick=“copy.select();vyjmout()“ />
<textarea cols=50 name=“copy“>Po kliknutí na toto tlačítko dojde k označení tohoto textu, jeho vyjmutí a vložení do schránky</textarea></form>

Ukázka:

Vložení textu ze schránky

Při vkládání dat ze schránky do stránky nám javascript dovolí pouze prostý text. Pokud byste tedy chtěli vložit obrázek, nejspíše se vám to nepodaří. Jako parametr dosadíme Paste, výsledná syntaxe bude document.execCommand("Paste").
Ukázka zdrojového kódu scriptu:

<script type=“text/javascript“ language=“JavaScript“>
function vlozit()
{document.execCommand(„Paste“)}
</script>
<form>
<input type=“button“ value=“Vložit“ onclick=“vlozit()“ />
<textarea cols=50 name=“copy“></textarea></form>

Ukázka: Po kliknutí na tlačítko vložit dojde k vložení textu ze schránky.

Označení všeho textu na stránce a vložení do schránky

JavaScript nám opět dovolí vložit do schránky prostý text, takže se vám nezkopírují žádné obrázky ani reklamy. Jako parametr dosadíme SelectAll, výsledná syntaxe bude document.execCommand("SelectAll").
Ukázka zdrojového kódu scriptu:

<script type=“text/javascript“ language=“JavaScript“>
function vse()
{document.execCommand(„SelectAll“)
document.execCommand(„Copy“); document.execCommand(„UnSelect“);}
</script>
<form>
<input type=“button“ value=“Všechen text ze stránky vložit do schránky“ onclick=“vse();“ />
<textarea cols=50 name=“copy“>Po kliknutí na toto tlačítko dojde k označení všeho textu na stránce a vložení do schránky</textarea></form>

Ukázka: Po kliknutí na toto tlačítko dojde k označení všeho textu na stránce a vložení do schránky.
 

Další zajímavé parametry execCommand

Potřebujete-li odznačit označený text, použijete parametr UnSelect, pro odstranění označeného textu použijete parametr Delete a pro vrácení akce tlačítko typu reset.

První ukázka využití těchto funkcí

Vysvětlení najdete v ukázce níže.

<script type=“text/javascript“ language=“JavaScript“>
function nahradit_vyskyt(cim)
{ // cim=html tag, ale bez <>, ten se dosadí automaticky
puvodni_retezec_textu=document.forms[„nas_form1“].nas_text.value;
// definuje oblast, kde se má daný výskyt vybraného textu
vybrany_retezec=document.selection.createRange().text;
// zjistí text, který byl vybrán
if (vybrany_retezec.length>0) {
// pokud není vybraný text roven 0, (tzn. něco bylo vybráno)
// pokračuje běh dále
oblast=new RegExp(vybrany_retezec,“gi“)
// proměnná „oblast“ má v sobě text, který má být nahrazen
novy_retezec=“<"+cim+">„+vybrany_retezec+“„;
// zde se vygeneruje kód, který bude nahrazovat vybraný text
// vybraný text: např. Petr, cim=“b“, výsledek <b>Petr</b>
predat_novy_retezec=puvodni_retezec_textu.replace(oblast,novy_retezec);
// vlastnost replace má dva parametry, jakou část nahradit a čím
// zde se dosadí jako první: např. Petr a druhá část <b>Petr</b>
document.forms[0].nas_text.value=predat_novy_retezec;
// zde dojde k zavolání na funkci replace, která nám zajistí
// nahrazení všeho výskytu vybraného textu za nový s tagem
document.forms[„nas_form1“].nas_text.select();
document.execCommand(„Unselect“);
// tyto řádky slouží pouze k ošetření jedné chyby
// pokud totiž vyberete text, uděláte požadovanou akci
// následně nevyberete nic, kliknete znovu na nějakou akci
// provedla by se, ikdyž jste zrovna třeba nic nevybrali
}
else { alert(„Nejprve vyberte část textu“) }
// pokud nebylo nic vybráno a došlo ke kliknutí na nějaký button
// upozorníme uživatele touto zprávou
}
</script>
<form name=“nas_form1″>
<br/><b>Zformátovat všechny výskyty vybraného textu</b><br/><br />
<input type=“button“ name=“bold“ value=“bold“ onclick=“nahradit_vyskyt(‚b‘);“>
<input type=“button“ name=“italic“ value=“italic“ onclick=“nahradit_vyskyt(‚i‘)“>
<input type=“button“ name=“bullet“ value=“bullet“ onclick=“nahradit_vyskyt(‚li‘)“>
<br />
<textarea rows=“5″ cols=“60″ name=“nas_text“ wrap=“virtual“>
Tento prvni script slouží k nahrazení všeho výskytu vybraného textu, takže když si vyberete třeba pouze písmeno: e, bude všechen jeho výskyt nahrazen tagem vybraného tlačítka
</textarea>

Ukázka využití těchto funkcí (příklad2)

Vysvětlení najdete opět v ukázce níže.

<script type=“text/javascript“ language=“JavaScript“>
function nahradit_cast(cim)
{vybrany_retezec=document.selection.createRange().text;
// zjistí text, který byl vybrán
if (vybrany_retezec.length>0) {
// pokud bylo něco vybráno pokračuj v běhu scriptu
novy_retezec=“<"+cim+">„+vybrany_retezec+“<\/"+cim+">„;
// vygeneruje řetězec který nahradí vybraný text
document.selection.createRange().text=novy_retezec;
// a nahradí vybraný text novým
}
else { alert(„Nejprve vyberte část textu“) }
// nic vybráno=zpráva uživateli
}
</script>
<form name=“nas_form2″>
<br/><b>Zformátovat vybraný text</b><br/><br />
<input type=“button“ name=“bold“ value=“bold“ onclick=“nahradit_cast(‚b‘);“>
<input type=“button“ name=“italic“ value=“italic“ onclick=“nahradit_cast(‚i‘)“>
<input type=“button“ name=“bullet“ value=“bullet“ onclick=“nahradit_cast(‚li‘)“>
<br />
<textarea rows=“5″ cols=“60″ name=“nas_text“ wrap=“virtual“>
Tento druhy script slouží pouze k nahrazení vybraného textu, takže když si vyberete třeba konkrétní písmeno: e, bude nahrazen pouze výskyt tohoto vybraného a ne všech jako u minulé ukázky.
</textarea>

V případě zájmu o toto téma se můžete podívat na již vyšlé články, které popisují další využití:

Kopírování textu pomocí tlačítek
DHTML editor – opravy starších textů a náhled
Podmíněné komentáře v Internet Exploreru

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.