mailtoリンクのクリックでクリップボードにコピーする

Ads

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>

via

Copy mailto: email to clipboard

タイトルとURLをコピーしました