Kopírování textu pomocí tlačítek

13. ledna 2002

Publikujete na svých stránkách návody, zdrojové kódy a podobné články, kterými vysvětlujete čtenářům řešení některých problémů? Pak jim zjednodušte uložení zadaného textu z webu na lokální počítač.

Stačí jedno klepnutí na tlačítko, kterým zkopírujete text do schránky a pak například v Poznámkovém bloku uložíte na svůj disk nebo do zdrojového kódu stránky. Omezení tohoto skriptu je v podpoře prohlížečů (Netscape ani Opera to neumí). Zde je vlastní skript:

<script language=“Javascript“>
<!–
function kopiruj() {
text = document.body.createTextRange();
text.moveToElementText(id_textu);
text.execCommand(„Copy“);
}
//–>
</script>

Zaměřte se na druhý řádek funkce. Sem zadáte do závorek identifikátor části textu stránky (v tomto případě je to ‚id_textu‘), který chcete kopírovat. Tělo stránky bude vypadat takto.

<body>
Nějaký text který nebudete kopírovat…
<div id=“id_textu“ style=“…“>Tento text se bude kopírovat</div>
<BUTTON onclick=“kopiruj()“ Kopírovat</BUTTON>
Zde bude další text který se již kopírovat nebude…
</body>

Klepnutím na tlačítko se zadaný text zkopíruje do schránky, odkud ho můžete kamkoli vložit.

Další možnosti skriptu

Ve skriptu lze aplikovat také další dva příkazy – Vyjmout a Vložit. Pro Vyjmutí zadáte do závorek třetího řádku funkce příkaz Cut a pro vložení Paste. Otázka je, zda najdou tyto příkazy na webové stránce uplatnění. Další možností, jak zvýšit flexibilitu tohoto skriptu, je použití této funkce s více argumenty. Určitě bych použil jako argument identifikátor textu (i příkazy by se mohli hodit). Výsledný skript by měl tuto podobu.

<html>
<head>
<script language=“Javascript“>
<!–
function proved(fun, kam) {
text = document.body.createTextRange();
text.moveToElementText(kam);
text.execCommand(fun);
}
//–>
</script>
</head>
<body>
<span id=“prvni“ style=“height:20; width:200;border:1 ridge black;text-align:center;“>Prvni text</span>
<span id=“druhy“ style=“height:20; width:200;border:1 ridge black;text-align:center;“>Druhy text</span><br>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Copy‘, prvni)“>Kopíruje první text</BUTTON>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Cut‘, prvni)“>Vyjme první text</BUTTON>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Paste‘, prvni)“>Vloží kopírovaný nebo vyjmutý text</BUTTON><br>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Copy‘, druhy)“>Kopíruje druhý text</BUTTON>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Cut‘, druhy)“>Vyjme druhý text</BUTTON>
<BUTTON STYLE=“margin:5px“ onclick=“proved(‚Paste‘, druhy)“>Vloží kopírovaný nebo vyjmutý text</BUTTON>
</body>
</html>

Zde si můžete příklad vyzkoušet:
Klepnutím na tlačítko se vám do schránky nakopíruje kód, jehož funkční podobu můžete vidět zde.

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

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

Mohlo by vás také zajímat

Nejnovější

4 komentářů

  1. Erik Pikner

    Lis 2, 2009 v 13:24

    Tento script nefunguje, ani na těchto stránkách.

    Odpovědět
  2. Miroslav Kučera

    Lis 5, 2009 v 15:20

    Erik Pikner: abych se priznal, moc nechapu, proc se tomu divite? Vzdyt tento clanek je z roku 2002 a vsechno se neustale vyviji, JavaScript, jeho podpora ve webových prohlizecich atd…

    Odpovědět
  3. Walther H.

    Led 24, 2013 v 16:37

    cp

    Mate tam pravopisnou chybu, zapomnel jste ukoncit sekci BUTTON znakem >
    Ted uz to funguje, taky mi to poprve neslo, az kdyz jsem se na ten kod podival poradne, tak pak me to trklo :-D (nejake vzpominky z IT prece jen zustaly a nebyly nadarmo :-)

    Odpovědět
  4. Anonym

    Čvc 10, 2013 v 18:11

    klikam na tlacitko jako blazen a ve schrance nic nemam :D

    Odpovědět

Napsat komentář: Erik Pikner Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *