MENU


Clipboard

The clipboard is a temporary storage location for Cut, Copy, and Paste operations over the entire operating system.

Copying text...
RESETRUNFULL
<!DOCTYPE html><html>
<body>
   <p>Larry Tesler, inventor of the cut, copy, and paste commands, dies at 74.</p>
   <button onclick="copy()">COPY</button>
   <button onclick="paste()">PASTE</button><hr/>
   <textarea placeholder="try pasting here" style="width:300px; height:50px;"></textarea>
   <script>
      function copy(){
         var t = document.querySelector("p").innerText;
         navigator.clipboard.writeText(t).then(function() {
            alert("copied! ("+t+")");
         }, function() {
            alert("writing to clipboard failed");
         });
      }
      function paste(){
         navigator.clipboard.readText().then(t=>{
            document.querySelector("textarea").value = t +"...RIP";
         });
      }
   </script>
</body></html>
Copying an image into the clipboard...
RESETRUNFULL
<!DOCTYPE html><html><body style="height:300px;">
   <button onclick="copy()">COPY</button>
   <button onclick="paste()">PASTE</button><hr/>
   <img/>
   <script>
      async function copy(){
         try {
            const blob = await (await fetch("/shared/logo.png")).blob();
            await navigator.clipboard.write([new ClipboardItem({[blob.type]: blob})]);
            alert('image copied.');
         } catch(err) {
            alert(err.name +": "+ err.message);
         }
      }
      async function paste(){
         try {
            const clipboardItems = await navigator.clipboard.read();
            for (const clipboardItem of clipboardItems) {
               for (const type of clipboardItem.types) {
                  const blob = await clipboardItem.getType(type);
                  document.images[0].src = URL.createObjectURL(blob);
               }
            }
         } catch (err) {
            console.error(err.name, err.message);
         }
      }
   </script>
</body></html>