loading...
Cover image for How to copy an email address to the clipboard

How to copy an email address to the clipboard

chase42 profile image Chase Collins ・2 min read

A feature in my portfolio website that I'm really happy with is the ability to copy my email address to the user's clipboard, instead of sending them to an email client. I got this idea from several recruiters and career coaches who said that they get annoyed when they are sent to the wrong email client or taken away from the website before they were ready. This way you can offer your email address in an easy and clean way that offers little in a way of annoyance or distraction.

The first thing you need is to download clipboard.js, a neat little project that allows you to be able to easily copy to clipboard without tons of code or bloated packages.

Alt Text

Then, of course, import at the top of your file.

Alt Text

Next, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.

Alt Text

Then we use the .on() from the new Clipboard we just instantiated to create two custom events.

Alt Text

Lastly, we have the email icon I used which when clicked copies the email to clipboard. Notice the class="btn" which links it to the functionality and the data-clipboard-text="chaseofthecollins@gmail.com" which is the information that is copied.

Alt Text

That's it! I hope this made sense and was useful to some of you :)

Posted on May 9 by:

chase42 profile

Chase Collins

@chase42

Full Stack Web Developer, with meticulous attention to detail who loves to problem-solve with clean, semantic code while always learning and improving my skills.

Discussion

markdown guide
 

How is the compatibility these days with clipboards? I remember it being a massive pain to get it working cross browser, had that changed?