[WEB] Adobe Flash 중단에 따른 zeroclipboard 대체작업

# 1. 개요

- 기존에 플래시 기반의 zeroclipboard를 사용하던 부분에 대해 2020년까지 교체해야함. (크롬 정책)

 

zeroclipboard를 사용한 이유는 클립보드로 복사하기 위함.

 

zeroclipboard 대신 Async Clipboard API를 사용함. 자세한 내용은 아래 링크를 참고.

 

Ref. https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

 

---

#2. 예제

 

- 위 링크 예제로 간단한 텍스트를 클립보드에 복사하는 예제임.

 

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
      
      </textarea>
</div>

 

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand("copy");
    var msg = successful ? "successful" : "unsuccessful";
    console.log("Fallback: Copying text command was " + msg);
  } catch (err) {
    console.error("Fallback: Oops, unable to copy", err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(
    function() {
      console.log("Async: Copying to clipboard was successful!");
    },
    function(err) {
      console.error("Async: Could not copy text: ", err);
    }
  );
}

var copyBobBtn = document.querySelector(".js-copy-bob-btn"),
  copyJaneBtn = document.querySelector(".js-copy-jane-btn");

copyBobBtn.addEventListener("click", function(event) {
  copyTextToClipboard("Bob");
});

copyJaneBtn.addEventListener("click", function(event) {
  copyTextToClipboard("Jane");
});