[Jquery&Javascript] 페이지 URL 복사 방법!!

안녕하세요 오늘은 스프링에서 제위쿼리를 이용한 URL주소 복사 (클립보드) 사용 방법에 대해 알아보겠습니다.

HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다.

 

---

 

HTML

 

a태그를 통해 onclick으로 함수를 호출합니다.

저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다.

<span class="button gray medium"><a href="#" onclick="clip(); return false;">URL주소복사</a></span>

JAVASCRIPT

 

a태그에서 호출한 함수인 clip을 작성해줍니다.

 

url을 변수로 만들고

textarea라는 변수에 textarea의 요소를 생성해줍니다.

이 것을 body의 가장 아래, 즉 </body> 바로 위에 textarea를 추가해줍니다.

(임시 공간이기 때문에 위치는 상관이 없습니다.)

url에는 현재 주소값을 넣어줍니다.

textarea 값에 url를 넣어주고,

textarea를 설정합니다.

그리고 document.execCommand("copy"); 메서드를 사용하면 복사가 됩니다.

그리고 마지막으로 textarea 요소를 없애주고,

복사되었다는 알림창을 띄우면 끝입니다.

<script type="text/javascript">

function clip(){

	var url = '';
	var textarea = document.createElement("textarea");
	document.body.appendChild(textarea);
	url = window.document.location.href;
	textarea.value = url;
	textarea.select();
	document.execCommand("copy");
	document.body.removeChild(textarea);
	alert("URL이 복사되었습니다.")
}

</script>

 

주소이름

 

클릭을 하면 알림창

 

메모장에 붙여 넣으면 주소가 복사된 것을 알 수 있습니다.