원했던 건 우클릭하면 바로 복사 하려고 하였으나,
왜 그런지 document.execCommand("copy"); 가 동작하지 않는다.
그래서 click 이벤트로 발생하기 위해 '복사'div 를 생성하였다.
function copyToClipboard(value, showNotification, notificationText) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val(value).select();
document.execCommand("copy");
$temp.remove();
if (typeof showNotification === 'undefined') {
showNotification = true;
}
if (typeof notificationText === 'undefined') {
notificationText = "Copied to clipboard";
}
var notificationTag = $("div.copy-notification");
if (showNotification && notificationTag.length == 0) {
notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
$("body").append(notificationTag);
notificationTag.fadeIn("slow", function () {
setTimeout(function () {
notificationTag.fadeOut("slow", function () {
notificationTag.remove();
});
}, 10);
});
}
}
var copyData = "";
//$(".context-menu-one").on("contextmenu", function(event) {
$("table").on("contextmenu", function(event) {
event.preventDefault();
$("div.custom-menu").remove();
copyData = $.trim(event.target.textContent);
$("<div class='custom-menu'>복사</div>")
.appendTo("body")
.css({top: event.pageY + "px", left: event.pageX + "px"})
.on("click", function(event) {
event.preventDefault();
copyToClipboard(copyData);
copyData = "";
$("div.custom-menu").remove();
});
$("body").click(function (){
$("div.custom-menu").remove();
});
});
/* 우측 클릭 '복사' */
.custom-menu {
z-index:1000;
position: absolute;
background-color:#C0C0C0;
border: 1px solid black;
padding: 2px;
border-radius: 5px;
}
.copy-notification {
color: #ffffff;
background-color: rgba(0,0,0,0.8);
padding: 20px;
border-radius: 30px;
position: fixed;
top: 50%;
left: 50%;
width: 150px;
margin-top: -30px;
margin-left: -85px;
display: none;
text-align:center;
}
참조
