Rychlý tip:Přístup do schránky pomocí JavaScriptu

V tomto článku vám ukážeme, jak používat jednoduché vanilkové úryvky JavaScriptu k:

  1. Přidejte text do schránky při akci uživatele, jako je stisknutí tlačítka.
  2. Upravte obsah schránky, když uživatel něco zkopíruje.

Rozhraní API, která budeme používat, nevyžadují žádné externí knihovny a mají téměř dokonalou kompatibilitu s prohlížeči!

Kopírovat po kliknutí

Úžasnou funkcí usnadnění, kterou můžete přidat na svůj web, je možnost kopírovat řetězce přímo stisknutím tlačítka. Tuto interakci lze použít k rychlému zachycení adres URL, dlouhých řetězců, jako jsou klíče SSH, terminálové příkazy, hexadecimální barvy nebo jakákoli jiná data, která se často kopírují a vkládají.

Abychom toho dosáhli, budeme muset použít skvělou metodu JavaScriptu nazvanou execCommand() . Umožňuje nám vyvolat řadu různých událostí, které manipulují s upravitelným obsahem, jako je zvýraznění textu tučným písmem/kurzívou, provádění zpět/opakování a také kopírování/vyjímání/vkládání.

document.execCommand('copy');

Funguje to přesně jako stisknutí CTRL/Cmd+C na klávesnici, takže abychom mohli zkopírovat jakýkoli text, musíme jej nejprve vybrat. To je možné v JavaScriptu díky Selection API, které nám umožňuje programově provádět výběr textu z libovolného HTML elementu na stránce.

var button = document.getElementById("copy-button"),
    contentHolder = document.getElementById("content-holder");

button.addEventListener("click", function() {

    // We will need a range object and a selection.
    var range = document.createRange(),
        selection = window.getSelection();

    // Clear selection from any previous data.
    selection.removeAllRanges();

    // Make the range select the entire content of the contentHolder paragraph.
    range.selectNodeContents(contentHolder);

    // Add that range to the selection.
    selection.addRange(range);

    // Copy the selection to clipboard.
    document.execCommand('copy');

    // Clear selection if you want to.
    selection.removeAllRanges();

}, false);

Chcete-li vidět příklad v akci, podívejte se na editor níže:

var button = document.getElementById("copy-button"),
    contentHolder = document.getElementById("content-holder");

button.addEventListener("click", function() {

    // We will need a range object and a selection.
    var range = document.createRange(),
        selection = window.getSelection();

    // Clear selection from any previous data.
    selection.removeAllRanges();

    // Make the range select the entire content of the contentHolder paragraph.
    range.selectNodeContents(contentHolder);

    // Add that range to the selection.
    selection.addRange(range);

    // Copy the selection to clipboard.
    document.execCommand('copy');

    // Clear selection if you want to.
    selection.removeAllRanges();

}, false);
<p id="content-holder">This text will be inserted into the clipboard.</p>

<button id="copy-button">Copy Text</button>

<textarea placeholder="Paste here"></textarea>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding: 20px;
    font: normal 16px sans-serif;
    color: #555;
}

p{
    margin-bottom: 20px;
}

button{
    padding: 8px 12px;
    margin-bottom: 20px;
}

textarea {
    display: block;
    padding: 10px;
    width: 400px;
    height: 120px;
}

Ve výše uvedeném příkladu je obsah, který chceme kopírovat, jednoduše uložen v odstavci. Pokud požadovaný text na stránce není, budete jej muset nejprve napsat do prvku skrytého mimo obrazovku.

Upravit zkopírovaný text

Zde vám ukážeme, jak manipulovat s obsahem ve schránce po jeho zkopírování. To může být velmi užitečné pro escapování kódu, formátování čísel a dat nebo pro jiné transformace textu, jako jsou velká, malá písmena atd.

JavaScript nám poskytuje copy() a paste() události, ale jsou navrženy tak, aby byl obsah uložený ve schránce bezpečný:

  • V kopii událost handler nemůžeme číst, co je uloženo ve schránce, protože tam mohou být osobní informace, ke kterým bychom neměli mít přístup. Můžeme však přepsat data schránky.
  • V vložit v případě, že je to naopak:můžeme data číst, ale nemůžeme je měnit.

Protože chceme číst a zapisovat zároveň, budeme muset ještě jednou použít Selection API. Zde je řešení:

document.addEventListener('copy', function(e){

    // We need to prevent the default copy functionality,
    // otherwise it would just copy the selection as usual.
    e.preventDefault();

    // The copy event doesn't give us access to the clipboard data,
    // so we need to get the user selection via the Selection API.
    var selection = window.getSelection().toString();

    // Transform the selection in any way we want.
    // In this example we will escape HTML code.
    var escaped = escapeHTML(selection);

    // Place the transformed text in the clipboard. 
    e.clipboardData.setData('text/plain', escaped);

});

Kód si můžete vyzkoušet v editoru níže:

document.addEventListener('copy', function(e){

    // We need to prevent the default copy functionality,
    // otherwise it would just copy the selection as usual.
    e.preventDefault();

    // The copy event doesn't give us access to the clipboard data,
    // so we need to get the user selection via the Selection API.
    var selection = window.getSelection().toString();

    // Transform the selection in any way we want.
    var escaped = escapeHtml(selection);

    // Place the transformed text in the clipboard. 
    e.clipboardData.setData('text/plain', escaped);

});

// Primitive HTML escape function.
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
 }

<p class="copy-text">Copy and paste any of the HTML code below to escape it.</p>

<pre><code>
&lt;div class=&quot;container&quot;&gt;

    &lt;div class=&quot;starter-template&quot;&gt;
        &lt;h1&gt;Lorem Ipsum&lt;/h1&gt;
        &lt;p class=&quot;lead&quot;&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<textarea class="paste-text" placeholder="Paste here"></textarea>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    padding: 20px;
    font: normal 16px sans-serif;
    color: #555;
}

pre{
    font-size: 14px;
    margin-bottom: 20px;
}

textarea {
    padding: 10px;
    width: 500px;
    height: 170px;
}

Další čtení

V tomto rychlém tipu jsme vám představili dva užitečné úryvky pro práci se schránkou v čistě vanilkovém JavaScriptu. Použili jsme spoustu moderních nativních API, takže tady jsou znovu, pokud si o nich chcete přečíst více:

  • execCommand – Provádění akcí, jako je kopírování, vložení, vyjmutí, tučné písmo, kurzíva, podtržení, smazání a mnoho dalších. - MDN, mohu použít
  • Selection API – Umožňuje vývojářům provést výběr rozsahu z libovolného textu na stránce. - MDN, mohu použít
  • Událost kopírování JavaScriptu – událost, která se spustí, když uživatelé stisknou CTRL/Cmd+C nebo z nabídky po kliknutí pravým tlačítkem zvolí „kopírovat“. - MDN, mohu použít

Pokud také potřebujete větší kontrolu nad událostmi kopírování/vkládání/vyjímání, můžete použít knihovnu, jako je clipobard.js. Má spoustu funkcí a poskytuje pěkné čisté API pro správu schránky.

Doufáme, že se vám tento článek líbil! Neváhejte se zeptat nebo zanechat návrhy v sekci komentářů níže :)