mailtoリンクのクリックでクリップボードにコピーする
Result
mailtoリンクをクリックすると、メーラーを立ち上げずにクリップボードにコピーさせる、というもの
jQueryを使っています
jQuery
$(document).ready(function() {
$("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;
});
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);
});
});
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>
|
via
Copy mailto: email to clipboard
