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>
