[트러블슈팅, JS] - div 클릭 시 div의 text 내용 복사

22.09.07 기록
에러는 아니지만 새로 알게 된 내용이라 정리

div 클릭 시, div의 text 내용 복사하기

결론: window.navigator.clipboard.writeText() 메서드 사용

---

📽 결과 화면

화면상의 코드를 클릭한 뒤 주소창에 붙여넣기를 해보았다.

---

✅ 해결 과정

화면상에 보이는 (회의) 코드를 클릭하면 복사가 되게끔 하고 싶었다.

검색해 본 결과, 과거에는 document.execCommand() 메서드를 사용하여 선택 영역을 복사하고 정렬하는 등의 이벤트를 정의해 주었다.
하지만 현재에는 사용되지 않는다! (동작할 수는 있지만 웹 표준에서 Deprecated 되어 공식 문서에서도 사용되지 않는다.)

현재에는 Clipboard API가 이를 대체한다. Clipboard_API 관련 문서

읽기, 쓰기의 메서드(read, readText, write, writeText)들이 정의되어 있는데, 그중 복사 기능을 구현하기 위해서는 writeText() 메서드를 사용하면 된다.

writeText() 메서드는 지정된 텍스트 문자열을 시스템 클립보드에 쓴다. (=> 복사한다.) writeText() 관련 문서

복사를 원하는 텍스트를 인자로 넣어줘야 하기 때문에, 먼저 복사를 원하는 텍스트를 변수에 받고, 그 변수를 넣어주는 식으로 작성해 보았다.

// 해당 div를 클릭하였을 때, div 안의 text("abcd-123")을 복사하고 싶다.
<div class="join_code" onclick="copyCode()">abcd-123</div>


function copyCode() {
  // 해당 div 요소를 변수에 받고,
  const code = document.querySelector(".join_code");

  // window.navigator.clipboard.writeText() 메서드에
  // div 요소의 텍스트 내용을 (code.textContent) 인자로 넣어주면 끝!
  window.navigator.clipboard.writeText(code.textContent).then(() => {
    alert('회의 코드 복사 완료!');
  });
};