[JavaScript(jQuery)] 클립보드 복사

웹 사이트 제작 시 url 주소 복사 기능을 위해 클립보드 기능을 만들고 싶으신 분들이 많습니다.

 

해당 내용은 JavaScript로 만든 기능으로 많은 분들이 도움이 됐으면 좋겠네요.

 

var url = window.location.href; // 현재 페이지의 URL 가져오기
var tempInput = $('<input>'); // 임시 <input> 엘리먼트 생성
$('body').append(tempInput); // <input> 엘리먼트를 body에 추가
tempInput.val(url).select(); // <input>에 URL을 설정하고 선택
const copy = document.execCommand('copy'); // 선택된 URL을 클립보드에 복사
tempInput.remove(); // 임시 <input> 엘리먼트 제거

if (copy) {
  alert("클립보드 복사되었습니다.");
} else {
  alert("이 브라우저는 지원하지 않습니다.");
}

1. 현 페이지 주소를 가져 오기 위해 window.location.href로 주소를 가져와서 변수에 담아줍니다.

2. 가져온 주소를 복사하여 사용할 수 있게 만들기 위해 임의로 담을 만한 input을 만들어줍니다.

3. 만든 input를 웹 상에 호출해줘야 사용이 가능하기에 body안에 append를 사용하여 추가해준 뒤

4. 만든 임시 input에 가져온 url 주소를 담아 둔 뒤 select를 사용하여 선택해줍니다.

5. 해당 값을 execCommand의 copy를 하여 해당 값을 복사하여 줍니다.

6. 자기 할 일을 마친 input를 삭제하여 안보이게 만들어줍니다.

(제대로 복사하고자 하는 주소가 맞는지 확인을 하고 싶으시다면, 마지막 내용인 tempInput.remove를 안해주시면 됩니다.)

7. 위 내용식으로 확인할게 아니라면 복사가 되었는지 안되었는지 체크가 힘드니 조건문 if를 활용하여 내가 방금 url 주소를 담은 변수 copy에 값의 유무를 확인하여 alert창을 띄워 확인해줍니다.

 

해당 내용으로 간단하게 클립보드 기능을 만들 수 있습니다. 많은 분들께서 도움이 되신다면 좋을 것 같네요 ^^