[웹개발#7] javascript copy 텍스트 복사하기

웹개발을 하다 보면 텍스트 복사하기 기능이 필요할 때가 있습니다. 
그럴 때 요긴하게 쓸 수 있는 스킬을 공유합니다.

이 카피 기능을 찾게 된 계기가 있습니다. 

원래는 아래와 같이 사용해서 썼는데, 문제가 발생하더군요.

var copy_text = document.getElementById('copy_text');
copy_text.select();
document.execCommand('copy');

그냥 pc 웹이나 모바일 웹에서는 잘 되는데, 하이브리드 앱에서 실행해보니, 안드로이드 기기에서는 또 안되는 겁니다.
그래서 찾아보았더니...

일단, Document.execCommand() 기능이 웹표준에서 삭제된 기능이라고 합니다...

그리고, 치명적인 단점이 있는데 복사하려는 문자는 반드시 선택(selection)이 가능한 입력필드여아만 한다는 것입니다. 그래서 input 이나 textarea 같은 태그에서만 사용이 가능합니다. 더군다나, display:hidden 처럼 숨김처리하면 또 적용이 안됩니다.

그래서 찾은 방법이 아래 예제에서 사용한 clipboard 입니다.

 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<button id="copy_text" type="button" data-clipboard-text="복사할 텍스트">복사하기</button>
<script>
$(function(){
    var clipboard = new ClipboardJS('#copy_text');
	
    clipboard.on('success', function(e) {
      console.info('Text:', e.text);
      alert("텍스트가 복사되었습니다. \nCtrl + v 를 눌러서 붙여넣기 하세요.");
    });

    clipboard.on('error', function(e) {
      alert("Ctrl + C 를 눌러서 복사해 주세요.");
    });
});
</script>

 

출처 : https://clipboardjs.com/

clipboard.js