클립보드 복사방법

'document.execCommand(), Clipboard API, clipboard.js 라이브러리' 이 3가지가 존재한다.

1. document.execCommand()

최근에 업데이트된 문서를 확인해보니 document.execCommand() 기능은 앞으로 없어질 것이기 때문에 사용하지 않도록 권장한다.

간단한 코드

<!--
    Test 1(t1) 샘플 코드
 -->
<style>
  [id^="t1-"] {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
  }
</style>

<textarea id="t1-textarea" rows="5" cols="30">[테스트 텍스트]
안녕하세요^^
저를 복사해 주세요.</textarea>
<button id="t1-textarea-btn" type="button" onclick="t1_execCommandCopy(this.id)">
  &lt;textarea&gt;의 텍스트를 클립보드에 복사하기
</button>

<br /><br />

<input id="t1-input" type="text" size="25" value="테스트 텍스트입니다(^^)"/>
<button id="t1-input-btn" type="button" onclick="t1_execCommandCopy(this.id)">
  &lt;input&gt;의 텍스트를 클립보드에 복사하기
</button>

<script>
  function t1_execCommandCopy(btnID) {
    const element = document.getElementById(btnID.replace('-btn', ''));
    // select()를 호출하기 전에 focus()를 호출해 주는 것이 버그를 줄일 수 있다
    element.focus();
    // select() 함수는 <textarea> 또는 <input> 요소에서만 사용할 수 있다
    element.select();
    // 선택한 영역의 모든 텍스트를 클립보드에 복사한다
    document.execCommand('copy');
  }
</script>

크게보자면 Dom을 가져와서 해당 Dom의 select 메소드를 사용하고
document.execCommand('copy') 를 사용하여 클립보드 적용을 시킨다.

2. Clipboard API

execCommand를 대체할 수 있다.

<!--
    Test 3(t3) 샘플 코드
 -->
<style>
  [id^="t3-"] {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
  }
  button[id^="t3-"] {
    width: 300px;
  }
  #t3-div, #t3-span {
    background-color: #ffff8d;
    width: max-content;
  }
</style>

<textarea id="t3-textarea" rows="5" cols="30">[클립보드 API 테스트]
반갑습니다*^^*
저를 복사하세요!</textarea>
<button id="t3-textarea-btn" type="button" onclick="t3_clipboardWriteText(this.id)">
  &lt;textarea&gt;의 텍스트를 클립보드에 복사하기
</button>

<br /><br />

<input id="t3-input" type="text" size="25" value="클립보드 API 테스트입니다(^^*"/>
<button id="t3-input-btn" type="button" onclick="t3_clipboardWriteText(this.id)">
  &lt;input&gt;의 텍스트를 클립보드에 복사하기
</button>

<br /><br />

<div id="t3-div">[클립보드 API 테스트]<br />
반가워^^//<br />
나를 복사해 줄래?</div>
<button id="t3-div-btn" type="button" onclick="t3_clipboardWriteText(this.id)">
  &lt;div&gt;의 텍스트를 클립보드에 복사하기
</button>

<br /><br />

<span id="t3-span">클립보드 API 테스트^///^</span>
<button id="t3-span-btn" type="button" onclick="t3_clipboardWriteText(this.id)">
  &lt;span&gt;의 텍스트를 클립보드에 복사하기
</button>

<script>
  function t3_clipboardWriteText(btnID) {
    const copyBtn = document.getElementById(btnID);
    const textElement = document.getElementById(btnID.replace('-btn', ''));
    let text;
    if (textElement.tagName === 'TEXTAREA' || textElement.tagName === 'INPUT') {
      text = textElement.value;
    } else {
      text = textElement.textContent;
    }

    if (text) {
      navigator.clipboard.writeText(text)
        // 성공인 경우
        .then(() => {
          if (copyBtn.textContent !== '복사됨!') {
            const originalText = copyBtn.textContent;
            copyBtn.textContent = '복사됨!';
            setTimeout(() => {
              copyBtn.textContent = originalText;
            }, 1000);
          }
        })
        // 실패인 경우
        .catch(err => {
          console.log('클립보드에 복사 실패', err);
        })
    }
  }
</script>

제일 중요한 부분은 해당 부분이다.
navigator.clipboard.writeText(text) 이것만 적용해도 복사는된다.
.then 과 .catch로 나머지 정리한 부분들은 부수적인 다른처리지 실제 적용되는 복사는 해당 코드만 입력해도 처리가된다.

text의 경우 div에 비해 textarea와 input일때 value로 받고
div는 textContent로 받는다.

3. clipboard.js 라이브러리

라이브러리는 굳이 사용하지않을려고 아래 링크에서 해당 부분은 보기를 추천한다.

출처

JavaScript 클립보드 복사