Result
mailtoリンクをクリックすると、メーラーを立ち上げずにクリップボードにコピーさせる、というもの
jQueryを使っています
jQuery
$(document).ready(function() { // mailtoリンクにクラスを追加 $("a[href^=mailto]").wrap('<span class="mailto-wrapper">'); $("a[href^=mailto]").addClass("mailto-link"); //クリック時にコピーした旨のメッセージ表示 var mailto = $(".mailto-link"); var mailtoWrapper = $(".mailto-wrapper"); var messageCopy = "Click to copy email address."; var messageSuccess = "Email address copied to clipboard."; mailtoWrapper.append('<span class="mailto-message"></span>'); $(".mailto-message").append(messageCopy); //デフォルトアクションの無効化 $("a[href^=mailto]").click(function() { return false; }); //クリックでhrefが表示され、'mailto:'を削除 //メールアドレスを変数に格納 mailto.click(function() { var href = $(this).attr("href"); var email = href.replace("mailto:", ""); copyToClipboard(email); $(".mailto-message") .empty() .append(messageSuccess); setTimeout(function() { $(".mailto-message") .empty() .append(messageCopy); }, 2000); }); }); // from Stack Overflow. // https://stackoverflow.com/questions/33855641/copy-output-of-a-javascript-variable-to-the-clipboard // email変数をクリップボードにコピー function copyToClipboard(text) { var dummy = document.createElement("input"); document.body.appendChild(dummy); dummy.setAttribute("value", text); dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); }
html
<p>Try it out here: <a href="mailto:email@gmail.com">email@gmail.com</a>.</p>