웹브라우저의 보안이 많이 업데이트가 되어서 특정값을 클립보드로 복사하는 것들이 많이 힘들어지게 된것 같습니다. 그중에서도 다음 까페나 네이버 까페에서 게시글을 클릭하여 들어가서 보면 뷰페이지 상단 위쪽에 현재의 URL 주소가 나와있고 그것을 클릭하면 해당 URL 주소가 클립보드로 복사가 되는 기능이 있습니다. 그러한 기능을 구현하고자 잠깐 시간을 투자하여 jQuery 를 이용하여 구현해 보았습니다. 혹시 필요하신 분은 사용하시면 좋을것 같습니다.
우선은 URL 주소를 복사하는 원리에 대해서 말씀드리겠습니다. 그것은 은근히 간단한데요.. 우선은 input 태그에 복사가 되어질 url 주소를 넣습니다. 그리고 해당 input 태그를 스타일을 주어서 화면에 보이지 않게 합니다. 이것은 사용자에게 감추기 위함이지요. 그리고 제일 중요한 부분이 있는데요. jquery 스크립트가 URL 주소 복사 버튼을 눌러질때에 해당 input 태그를 화면에 보이게 합니다. 그리고 해당 태그의 텍스트를 선택(select) 합니다. 그리고 copy 라는 명령어로 선택되어진 택스트를 복사하게 됩니다. 그리고 나서 다시 input 태그를 화면에 보이지 않게 처리합니다.
이렇게 원리는 간단합니다. 여기서 의문이 드실 수 있는 부분이 한가지가 있는데요.. 바로 왜 input 태그를 처음에 않보이게 했다가 나중에는 보이게 하고 또 않보이게 하느냐?라고 생각이 드실 수가 있습니다. 그것은 바로 input 태크가 화면에 보이지 않는 상태가 되면 해당 테스트 값 즉 복사가 되어질 URL 값을 선택(select)하지 못하기 때문입니다. 그래서 어쩔수 없이 잠시동안 보이게 하는 것입니다. 그러나 이러한 동작은 엄청 빠른 시간내에 이루어 지기 때문에 사용자가 눈치 채지는 못할 것 같습니다.
아무튼 이제 소스 코드를 아래와 같이 올려드리겠습니다. 조잡한 코드 이지만 조금이나마 도움이 되셨으면 좋겠습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>URL 주소 복사하기 버튼 예제</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <style> .urlCopyBtn { font-weight:normal; color:gray; text-decoration:none; font-size:12px; } .urlCopyBtnIcon { border:1px solid gray; border-radius:3px; padding:0px 2px 1px 2px; color:white; background-color:gray; } .urlCopyBtnIcon a { color:white; } </style> <div> <a href="#urlCopyBtn" class="urlCopyBtn"> <span>화면에 보여질 URL 경로</span> <span class="urlCopyBtnIcon" style="margin-left:5px;">복사</span> </a> </div> <input type="text" value="복사될 URL 경로" id="urlAddress" style="display:none;"> <script type="text/javascript"> $('.urlCopyBtn').click(function(){ var urlAddress= $('#urlAddress'); urlAddress.css('display','block').select(); document.execCommand("Copy"); urlAddress.css('display','none'); alert('URL 주소가 복사 되었습니다'); return false; }); </script> </html> |
위의 코드를 보시면 아시겠지만 화면에 보여질 URL 경로와 복사될 URL 경로를 동일하게 하시면 화면에 보이는 그대로의 주소를 복사할 수 있으실 것입니다. 그리고 ID 값이 urlAddress 인 INPUT 태그가 바로 임시로 보여지고 복사가 된 후에는 다시 숨겨지는 부분입니다. 혹시 몰라서 파일로 첨부해서 올립니다. 파일 이름은 urlAddress.html 입니다. 다운 받아서 테스트 해보세요~
urlAddress.html'IT News > jQuery' 카테고리의 다른 글
| 다양한 jQuery 모바일 이벤트 리스트를 소개합니다. jQuery mobile event list (0) | 2017.03.10 |
|---|---|
| jquery keypress 엔터키를 누르면 확인버튼 누른 효과 (0) | 2016.05.06 |
| jquery 소스코드 복사 기능구현하기( jquery 배너퍼가기) (0) | 2016.05.06 |