javascript 클립보드 복사하기 clipboard copy

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

아래 이미지는 공유하기 버튼을 클릭했을때 뜨는 팝업창입니다. 빨간색 동그라미 부분에 있는 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 을 세팅해 줍니다.