Jump to content

Making a Copy to Clipboard Button

Recommended Posts

On 5/7/2021 at 12:24 AM, lkrepp said:

Hello, 

I am wanting to create a copy to clipboard button similar to what you would see on bitly.com when you want to copy your shortened url. Any tips? 

1253591170_ScreenShot2021-05-06at12_22_47PM.thumb.png.2830a9c4050543dc49387e7bdb0f9a94.png

Add a Code Block >> Paste this code

<p>Click copy to clipboard</p>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...

@tuanphan Could we please see a version of this to where a simple hyperlink/text could be clicked for copy? We would like to have specific anchor link URLs that could be more easily sharable. Like this:

Click To Copy/Share This Section

P.S. We're using SquareKicker for the anchor link generation. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.