상세 컨텐츠

본문 제목

javascript 클립보드 복사하기 clipboard copy

IT공부방/jQuery, ajax, java

by 동해둘리 2019. 1. 14. 17:54

본문

반응형


아래와 같이 게시글을 공유하는 경우에, 해당 게시글의 주소를 클립보드에 복사하는 경우가 있습니다. 아래 이미지의 공유하기 버튼을 클릭하면 공유창이 뜨게되고, 그 안에서 공유버튼과 주소를 클립보드에 복사하는 버튼을 두는게 일반적입니다.










아래 이미지는 공유하기 버튼을 클릭했을때 뜨는 팝업창입니다. 빨간색 동그라미 부분에 있는 URL복사 버튼을 클릭했을 때 현재 페이지의 주소를 복사하는 코드를 만들어 보겠습니다.








// 팝업 내에서 URL 복사 버튼을 클릭하면 CopyUrlToClipboard() 함수를 호출합니다.
<input type="text" id = "ShareUrl">
<span class="btn-type1"><button OnClick="javascript:CopyUrlToClipboard()">URL 복사</button></span>



// 아래 함수는 URL 복사 버튼 클릭시 실행되는 함수 입니다.

function CopyUrlToClipboard()

{

var obShareUrl = document.getElementById("ShareUrl");

obShareUrl.value = window.document.location.href;  // 현재 URL 을 세팅해 줍니다.


obShareUrl.select();  // 해당 값이 선택되도록 select() 합니다

document.execCommand("copy"); // 클립보드에 복사합니다.


obShareUrl.blur(); // 선택된 것을 다시 선택안된것으로 바꿈니다.

alert("URL이 클립보드에 복사되었습니다"); 

}



팝업이 뜰때, 현재 페이지의 URL 을 바로 뿌려주려면 
팝업이 뜰때 아래 코드를 추가하면 됩니다.

var obShareUrl = document.getElementById("ShareUrl");

obShareUrl.value = window.document.location.href;  // 현재 URL 을 세팅해 줍니다.



반응형

관련글 더보기

댓글 영역