[자바스크립트] 요소를 클립보드로 복사하기

자바 스크립트를 이용해 요소를 클립보드로 복사하는 방법입니다.

*IE 8 아래로는 작동하지 않습니다.

$(".copy").each(function() {
  $(this).append("<input type=\"text\" value=" + $(this).text() + ">")
});

input으로 요소를 복사해놔야 클립보드로 옮겨갈 수 있기 때문에, 복사하고 싶은 속성을 input의 value로 옮겨줍니다.

복사하고자 하는 게 아니면, $(this).text()를 $(this).attr("something") 등으로 수정하시면 됩니다.

$(".copy-img").each(function() {
  $(this).wrap("<span></span>"),
  $(this).parents("span").append("<input type=\"text\" value=" + $(this).attr("src") + ">")
})

이미지는 이미지 아래에 input이 들어갈 수 없으니, 이미지를 span으로 감싸주고 input을 넣어줍니다.

$(".copy").click(function() {
  var b = $(this).children("input");
  b.select(),
  document.execCommand("copy"),
  alert("copied! " + b.attr("value"))
});

$(".copy-img").click(function() {
  var b = $(this).parents("span").children("input");
  b.select(),
  document.execCommand("copy"),
  alert("copied! " + b.attr("value"))
});

이미지가 아닌 경우에는 바로 자식 요소의 input을 찾으면 되지만, 이미지는 부모 요소에서 input을 찾아가야 합니다.

아래는 alert 대신 부드럽게 알림창을 띄우는 걸 간단하게 작업해봤습니다.

HTML

<div id="snack"></div>

CSS

#snack {
  position: fixed;
  background: #eee;
  bottom: 50px;
  padding: 30px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: .3s
}

#snack.show {
  bottom: 100px;
  opacity: 1
}

JS

$(".copy").click(function() {
  var c = $(this).children("input"),
      d = $("#snack");
  c.select(),
  document.execCommand("copy"),
  d.addClass("show"),
  d.text("copied " + c.attr("value")),
  setTimeout(function() {
    d.removeClass("show")
  }, 1e3)
});

$(".copy-img").click(function() {
  var c = $(this).parents("span").children("input"),
      d = $("#snack");
  c.select(),
  document.execCommand("copy"),
  d.addClass("show"),
  d.text("copied " + c.attr("value")),
  setTimeout(function() {
    d.removeClass("show")
  }, 1e3)
});