jquery 소스코드 복사 기능구현하기( jquery 배너퍼가기)

버튼을 누르면 특정 html 코드나 텍스트가 클립보드로 복사가 되게 하려면 어떻게 해야할지 소개하고자 합니다.

제가 예시로 소개하고자 하는 것은 배너를 보여주고 소스코드 복사 버튼을 클릭했을때 클립보드로 소스코드가 복사가 되어 바로 붙여넣어 사용할 수 있도록 하기위한 방법을 소개 하도록 하겠습니다.

아래는 소스 코드입니다.

<div class="banner">
    <div><img src="bannerUrl" /></div>
    <p><a class="bannerBtn" href="#link"><img src="imgUrl" /></a></p>
</div>


<textarea id="ClipBoard" style="display:none"></textarea>

<script>
$('.bannerBtn').click(function(){
    var html = $(this).parent().prev().html();
    html = '<a href="http://www.test.com" target="_blank">'+html+'</a>';
    $('#ClipBoard').css('display', 'block').val(html).select();
   
    // copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
        $('#ClipBoard').css('display', 'none');

    } catch(e) {
        succeed = false;
    }

    if(succeed){
        alert('복사 되었습니다');
    }
    return false;

});

</script>

위의 소스 코드 내용을 보면 banner 클래스 부분의 배너 이미지와 배너 소스 복사 버튼이 들어가는 부분입니다. bannerBtn 클래스의 버튼이 눌러지면 해당 배너 이미지를 싸고 있는 banner 클래스의 이미지 html 값을 가져오도록 하고.. 그 값을 textarea (아이디가 ClipBoard) 에 값을 넣은 후에 복사를 하게 됩니다. 이 때 복사를 하려면 document.execCommand("copy"); 명령어를 사용하게 되는데요.. 그런데 여기서 주의할 점이 있습니다. 임시적으로 복사를 위해서 사용하는 textarea 는 클립보드로 복사를 하기전에 반드시 display 값이 block 등으로 되어서 화면에 표시가 되어야 합니다. 그래야 값이 정상적으로 복사가 됩니다. 저도 이것 때문에 조금 고생을 했었는데요. 아무튼 textarea 에 값을 넣어놓고 화면에 표시하여 해당 값을 선택(select)하여 클립보드로 복사하는 execCommand("copy") 명령어를 실행하고 다시 textarea의 display값을 none 으로 해서 화면에서 보이지 않도록 합니다. 물론 이러한 과정은 눈에 보이지 않을 정도로 빠르게 진행이 되기 때문에 문제가 않될것 같습니다. 만약에 이러한 과정이 눈에 보인다면 html 문서 맨 하단.. 즉 </html> 태크 아래에 textarea 를 넣어도 될것 같습니다. 지금 저도 그렇게 했으니까 말이죠.. 아무튼 스크립트 부분을 잠깐 설명해본다면요..

스크립트는 버튼이 클릭이 되면 해당 버튼의 바로 위에 있는 이미지 태크 값을 그대로 가져와서.. 링크될 주소를 a 태그와 함께 붙여서 html 를 생성합니다. 여기서 a 태그의 href 값은 http://www.test.com 으로 지정했는데요.. 그 값을 클릭되어졌을때 링크될 값으로 지정하시면 됩니다.

그리고 클립보드로 복사가 정상적으로 되어지면 복사 되었다라는 메시지가 표시가 됩니다. 이상으로 저의 짧은 jquery 소스코드 복사 기능을 설명 드렸습니다.

혹시 jquery 가 실행이 안되면 소스코드 맨 상단에

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

을 붙여 넣으세요.

copy to clipboard.txt

편의를 위해서 소스 코드 관련 파일을 첨부하였습니다.