clipboard jquery / 플래시 사용 안하고 클립보드 복사 하는 오픈소스

모바일에서 클립보드 복사를 해야 하는 경우가 있었습니다. 

찾아보니까 플래시(flash) 를 이용해 클립보드 복사하는 것이 있는데, 이것말고, jquery를 이용해서 복사를 띄울 수가 있었습니다. 

그 방법을 설명해드리겠습니다. 

사이트에 접속합니다. 사이트 바로가기

<script src="<?=G5_URL?>/js/clipboard.min.js"></script>

<!-- 위 처럼 소스 코드를 임포트하고, -->

<a href="#null" data-source="<?=G5_URL?>/index.php?id=<?=$member[mb_id]?>" id="copyContent" style="color:#fff; background:#333;">홍보 주소</a> 

<!-- 

클릭했을때, 이벤트가 발생하는 것은 바로 위 소스

아이디값 물려주고, 복사시킬 데이타를 data-source에 넣습니다.

-->

<script>

    var clipboard = new Clipboard('#copyContent', {

        text: function() {

var this_text = $("#copyContent").attr("data-source");

            return this_text; // 복사 대사이었던 data-source 그것을 반환

        }

    });

    clipboard.on('success', function(e) {

        //console.log(e);

alert("홍보주소 복사가 완료됐습니다.");

        //복사 액션이 벌어지고 난 후에 액션을 적는 곳입니다. 

    });

    clipboard.on('error', function(e) {

        //에러가  뜬다면 이렇게 나오겠쥬

        console.log(e);

    });

</script>