<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>clipboard &amp;mdash; Nat Knight</title>
    <link>http://natknight.xyz/tag:clipboard</link>
    <description>Reflections, diversions, and opinions from a progressive ex-physicist programmer dad with a sore back.</description>
    <pubDate>Mon, 20 Apr 2026 07:25:59 -0700</pubDate>
    <item>
      <title>TIL: Copying to the clipboard from a webpage is easy now</title>
      <link>http://natknight.xyz/til-copying-to-the-clipboard-from-a-webpage-is-easy-now</link>
      <description>&lt;![CDATA[#til #webdev #javascript #clipboard&#xA;&#xA;I remember a time when there were whole libraries dedicated to clipboard management.&#xA;&#xA;Turns out in browsers released after ~2020 you can do it with one line:&#xA;&#xA;navigator.clipboard.writeText(text).then(console.log).catch(console.error);&#xA;&#xA;!--more--&#xA;&#xA;Some caveats:&#xA;&#xA;this only works in a secure context (which mostly means either &#34;a site served over HTTPS&#34; or localhost).&#xA;the user needs to have interacted with the page before you can actually call the method.&#xA;this was only added to certain browsers in 2020, so it&#39;s new enough that it might cause problems if your constituents have older devices or don&#39;t update often.&#xA;&#xA;Usually when I do this I&#39;m implementing something like a &#34;copy to clipboard&#34; button:&#xA;&#xA;span id=&#39;copy-target&#39;This text is going into a clipboard/span&#xA;button onclick=&#39;copyToClipboard(&#34;copy-target&#34;)&#39;Copy/button&#xA;script&#xA;    const copyToClipboard = (target) =  {&#xA;        const element = document.getElementById(target);&#xA;        const value = element?.innerText&#xA;        if (value) {&#xA;            navigator.clipboard.writeText(value).then(console.log).catch(console.error);&#xA;        }&#xA;    }&#xA;/script&#xA;]]&gt;</description>
      <content:encoded><![CDATA[<p><a href="http://natknight.xyz/tag:til" class="hashtag"><span>#</span><span class="p-category">til</span></a> <a href="http://natknight.xyz/tag:webdev" class="hashtag"><span>#</span><span class="p-category">webdev</span></a> <a href="http://natknight.xyz/tag:javascript" class="hashtag"><span>#</span><span class="p-category">javascript</span></a> <a href="http://natknight.xyz/tag:clipboard" class="hashtag"><span>#</span><span class="p-category">clipboard</span></a></p>

<p>I remember a time when there were <a href="https://github.github.com/clipboard-copy-element/">whole</a> <a href="https://clipboardjs.com/">libraries</a> dedicated to clipboard management.</p>

<p>Turns out in <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard#browser_compatibility">browsers released after ~2020</a> you can do it with one line:</p>

<pre><code class="language-javascript">navigator.clipboard.writeText(text).then(console.log).catch(console.error);
</code></pre>



<p>Some caveats:</p>
<ul><li>this only works in a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts">secure context</a> (which mostly means either “a site served over HTTPS” or <code>localhost</code>).</li>
<li>the user needs to have interacted with the page before you can actually call the method.</li>
<li>this was only added to certain browsers in 2020, so it&#39;s new enough that it might cause problems if your constituents have older devices or don&#39;t update often.</li></ul>

<p>Usually when I do this I&#39;m implementing something like a “copy to clipboard” button:</p>

<pre><code class="language-html">&lt;span id=&#39;copy-target&#39;&gt;This text is going into a clipboard&lt;/span&gt;
&lt;button onclick=&#39;copyToClipboard(&#34;copy-target&#34;)&#39;&gt;Copy&lt;/button&gt;
&lt;script&gt;
    const copyToClipboard = (target) =&gt; {
        const element = document.getElementById(target);
        const value = element?.innerText
        if (value) {
            navigator.clipboard.writeText(value).then(console.log).catch(console.error);
        }
    }
&lt;/script&gt;
</code></pre>
]]></content:encoded>
      <guid>http://natknight.xyz/til-copying-to-the-clipboard-from-a-webpage-is-easy-now</guid>
      <pubDate>Mon, 10 Mar 2025 21:19:49 +0000</pubDate>
    </item>
  </channel>
</rss>