A few years ago I finally figured out that "mailto:" was deprecated by (almost) all browsers. This is embarassing because I should be on top of such things BUT in my defense I deal with that link-style all over the place. If you're supporting ancient browsers such as IE9 this is a none-issue but we live in the-almost year of 2020 and should correct old habits as they ripen.

Personally if I see an email link, I expect my email client to fire up when I hit that link... That is the UI pattern that I'm accustomed to; However, that is not the case with modern browsers. I get it, a browser should obviously limit amount of stuff it can do for security reasons... It defenetely shouldn't have permissions to fire-up local software and execute a "send to this addres" action.

It's still a pain in the rear to explain that to someone very accustomed to this type of UI pattern: why something that "used to be" is simply "not how it works anymore." So, I thought of this solution which happens to be widely documented and quite frankly elegant in my opinion:

function copyEmail() {
  var copyText = document.querySelector('.copyEmail');
  copyText.select();
  document.execCommand("Copy");
  alert("Copied to clipboard: " + copyText.value);
}

The markup:

<li>
    <input type="text" value="[email protected]" class="copyEmail" style="z-index:-100; opacity:0; position:absolute;">
    <a href="#" onclick="copyEmail()"><i class="fa fa-envelope-o" title="Copy to clipboard"></i></a>
</li>

Resulting in this: