Zkopírovat text z webové stránky lze například pomocí Ctrl+C. Jenže spousta lidí dnes honí internet přes mobil a v takovém případě je pohodlnejší kliknout na tlačítko/ikonu a tím zkopírovat text do schránky. Jak uživatelům tento luxus umožnit?
Tlačítkem nebo ikonou spustíme funkci zkopiruj(), která předá id prvku, ze kterého budeme kopírovat text. Vytvoříme skryté vstupní textové pole, zkopírujeme do něj text z prvku id, provedeme výběr hodnoty vstupního textového pole a příkazem document.execCommand() výběr zkopírujeme do schránky.
|
1 2 3 4 5 6 7 8 9 |
<script> function zkopiruj(id) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(id).text()).select(); document.execCommand("copy"); $temp.remove(); } </script> |
|
1 2 3 4 5 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="text1">Toto je První text</p> <p id="text1">Toto je Druhý text</p> <button onclick="zkopiruj('#text1')">Zkopíruj první text</button> <button onclick="zkopiruj('#text1')">Zkopíruj druhý text</button> |
Pomocí Ctrl+V můžeme ověřit, zda kód funguje dle očeklávání. Pokud by nedošlo ke zkopírování do chránky, bude problém s kompatibilitou příkazu „copy“, nebo s jeho spuštěním. Ve Firefoxu a v Chrome to však funguje.