Copy Cut Paste With Javascript (Simple Clipboard Examples)

Welcome to a quick tutorial on how to copy, cut, and paste with Javascript. The Stone Age of the Internet is long over, and yes, we can use Javascript to access the user’s clipboard.

  • Use navigator.clipboard.writeText("TEXT") to copy a block to text into the clipboard.
    • var txt = document.getElementById("TEXT-FIELD").value;
    • navigator.clipboard.writeText(txt);
  • Use navigator.clipboard.readText() to access the clipboard and do a paste.
    • let text = navigator.clipboard.readText();
    • text.then(txt => { document.getElementById("TEXT-FIELD").value = txt; });

Yep, that’s all for the basics. But the clipboard API is actually capable of copying images too – Read on for more examples!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TUTORIAL VIDEO

 

TABLE OF CONTENTS

Download & Notes Copy, Cut, Paste Useful Bits & Links
The End

 

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

COPY CUT PASTE IN JAVASCRIPT

All right, let us now walk through the copy-cut-paste trinity in this section with a few examples.

 

1) COPY TEXT FROM AN INPUT FIELD

1-copy-field.html
<script>
// (A) COPY TEXT TO CLIPBOARD
function jscopyA () {
  // (A1) GET TEXT FROM TEXT FIELD
  var txt = document.getElementById("demoA").value;

  // (A2) PUT TEXT INTO CLIPBOARD
  navigator.clipboard.writeText(txt)

  // (A3) OPTIONAL - DO THIS AFTER COPY
  .then(() => { alert("Copied"); });
}
</script>
 
<!-- (B) HTML -->
<input type="text" id="demoA" value="Hello World!" readonly/>
<input type="button" value="Copy Text Field" onclick="jscopyA()"/>

Yep, copying is as simple as that, a 2-steps process –

  • First, get the text from the input field – var txt = document.getElementById("demoA").value
  • Then put the text into the clipboard – navigator.clipboard.writeText(txt)

 

 

2) COPY TEXT CONTENT FROM HTML ELEMENT

2-copy-content.html
<script>
// (A) COPY TEXT TO CLIPBOARD
function jscopyB () {
  // (A1) GET TEXT FROM TEXT FIELD
  var txt = document.getElementById("demoB").innerText;
 
  // (A2) PUT TEXT INTO CLIPBOARD
  navigator.clipboard.writeText(txt)
 
  // (A3) OPTIONAL - DO THIS AFTER COPY
  .then(() => { alert("Copied"); });
}
</script>
 
<!-- (B) HTML -->
<p id="demoB">This is a <strong>random</strong> string.</p>
<input type="button" value="Copy Text Content" onclick="jscopyB()"/>

This is a random string.

Copying the text content HTML elements is pretty much the same process.

  • Get the text from the HTML element – var txt = document.getElementById("demoB").innerText
  • Put the text into the clipboard – navigator.clipboard.writeText(txt).

 

3) COPY IMAGE INTO CLIPBOARD

3-copy-image.html
<script>
// (A) COPY IMAGE TO CLIPBOARD
function jscopyC () {
  // (A1) FETCH IMAGE
  fetch ("cherry.png")
  .then (res => { return res.blob(); })
  .then (blob => {
    // (A2) IMAGE BLOB TO CLIPBOARD
    navigator.clipboard.write([new ClipboardItem({[blob.type]: blob})])

    // (A3) OPTIONAL - DO THIS AFTER COPY
    .then(() => { alert("Copied"); });
  });
}
</script>
 
<!-- (B) HTML -->
<input type="button" value="Copy" onclick="jscopyC()"/>

Yes, we can also copy an image. Just put the image blob data into the clipboard. But please take note that at the time of writing, Chrome also supports PNG files. All Chromium-based browsers should also have the same restriction – Firefox, Edge, Opera.

 

 

4) CUT TEXT FROM INPUT FIELD

4-cut.html
<script>
// (A) CUT TEXT TO CLIPBOARD
function jscut () {
  // (A1) GET TEXT FROM TEXT FIELD
  var txt = document.getElementById("demoD").value;

  // (A2) PUT TEXT INTO CLIPBOARD
  navigator.clipboard.writeText(txt)

  // (A3) EMPTY TEXT FIELD AFTER COPY
  .then(() => { document.getElementById("demoD").value = ""; });
}
</script>
 
<!-- (B) HTML -->
<input type="text" id="demoD" value="Hello World!" readonly/>
<input type="button" value="Cut" onclick="jscut()"/>

Look no further, this is the same as the previous copy example. It’s just that we clear the text field after copying the text to the clipboard.

 

5) PASTE TEXT FROM THE CLIPBOARD

5-paste.html
<script>
// (A) PASTE FROM CLIPBOARD
function jspaste () {
  // (A1) READ TEXT FROM CLIPBOARD - PERMISSION REQUIRED
  navigator.clipboard.readText()

  // (A2) PUT CLIPBOARD INTO TEXT FIELD
  .then(txt => {
    document.getElementById("demoE").value = txt;
  })

  // (A3) OPTIONAL - CANNOT ACCESS CLIPBOARD
  .catch(err => {
    alert("Please allow clipboard access permission");
  });
}
</script>

<!-- (B) HTML -->
<input type="text" id="demoE"/>
<input type="button" value="Paste" onclick="jspaste()"/><s

No need to panic, pasting is literally a simple 2 steps:

  • Read the text from the clipboard navigator.clipboard.readText(). Please take note that the user needs to grant access permission, we cannot do anything if the access is denied.
  • Simply put the clipboard text into where you want – .then(txt => { document.getElementById("TARGET").innerHTML = txt; })

 

 

6) COPY & CUT WITH EXEC COMMAND (DEPRECATED!)

6-exec-command.html
<script>
// (A) COPY
function oldcopy () {
  document.getElementById("demoF").select();
  document.execCommand("copy");
  alert("Text copied");
}

// (B) CUT
function oldcut () {
  document.getElementById("demoF").select();
  document.execCommand("cut");
  alert("Text copied");
}
</script>

<!-- (B) HTML -->
<input type="text" id="demoF" value="Foo Bar"/>
<input type="button" value="Copy" onclick="oldcopy()"/>
<input type="button" value="Cut" onclick="oldcut()"/>

Lastly, this is probably what you see everywhere on the Internet, using execCommand() to copy and cut. But please take extra note – As at the time of writing, it has been deprecated. Do not use this anymore.

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Copy, Cut, Paste With Vanilla Javascript (Click to Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *