내일을 위한 오늘

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

카테고리 없음

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

안경쓴루피 2022. 7. 1. 07:29
반응형

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

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

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

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

A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped

clipboardjs.com

 

반응형
0 Comments
댓글쓰기 폼