JavaScript에서 문자열 복사 클립보드(Clipboard)

순수 JavaScript를 이용한 방법

입력 폼에 있는 글자를 복사하는 방법이다.

    <input type="text" value="안녕하세요." id="myText">
    <button onclick="copyText()">문자열 복사</button>

  function copyText() {
    var copyText = document.getElementById("myText");
    copyText.select();
    document.execCommand("copy");
    alert("복사된 문자열: " + copyText.value);
  }

코드 실행

참고 : IE9 이하에서는 document.execCommand() 메서드가 지원되지 않는다.

clipboard.js를 이용한 방법

clipboard.js를 이용한 클립보드에 대해서 알아 본다. 관련된 해당 싸이트는 아래와 같다.

https://clipboardjs.com/

먼저 라이브러리를 추가해야 한다. CDN를 통한 방법을 추천한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

예제 1) 입력 폼 클립보드

<input id="foo" value="http://www.devkuma.com">

<button class="btn" data-clipboard-target="#foo">
    <img src=".btn" alt="Copy to clipboard">
</button>

코드 실행

예제 2) 텍스트 클립보드

<button class="btn" data-clipboard-text="안녕하세요.">Copy</button>

var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert("클립보드:" + e.text);
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

코드 실행