본문 바로가기
코딩/제이쿼리

클립보드복사 스크립트 (모든 브라우저)

by Euntori 2016. 11. 8.
반응형

clipboard 복사 스크립트. flash를 사용하지 않고 스크립트로만 함.

크롬, 파이어폭스, ie10 테스트 완료

 

방법은.. input박스를 안보이게 하나 만들고, 그 안에 value값을 집어넣어서 select되게 한후 복사하는 방법.

주의할 점은 input박스를 hidden처리하면 안된다. display:none도 하면 안되고 

opacity를 0으로 하거나 position을 absolute로 해서 가려지게 해야함.

 

HTML CODE

<a class="clipboardBtn" href="#" onclick="">ns1.euntori.com</a>
<a class="clipboardBtn" href="#" onclick="">211.000.000.000</a>

<a class="clipboardBtn" href="#" onclick="">ns2.euntori.com</a>
<a class="clipboardBtn" href="#" onclick="">211.111.111.111</a>

<input id="clip_target" type="text" value="" style="position:absolute;top:-9999em;"/>

 

jQuery CODE

$('.clipboardBtn').on('click', function(e) { // a의 텍스트값을 가져옴 
    var text = $(this).html(); //숨겨진 input박스 value값으로 text 변수 넣어줌.
    $('#clip_target').val(text); //input박스 value를 선택
    $('#clip_target').select(); // Use try & catch for unsupported browser '
    try { // The important part (copy selected text) 
    	var successful = document.execCommand('copy'); 
    
    	// if(successful) answer.innerHTML = 'Copied!'; 
    	// else answer.innerHTML = 'Unable to copy!'; 
    } catch (err) { 
    	alert('이 브라우저는 지원하지 않습니다.');
    } 
});
반응형

댓글