다음이나 네이버같은 포털사이트에서 자주 볼수 있는 클립보드 복사 버튼에 대해 알아보겠습니다.
자바스크립트를 이용하여 버튼을 눌렀을때 텍스트박스에 있는 내용을 클립보드로 복사하여
다른 프로그램등에 붙여넣기(Ctrl+V) 할수 있도록 해주는 예제입니다.. ^^
아래에 있는 [클립보드에 저장] 버튼을 누르시면 노란색 텍스트박스에 있는 주소가 클립보드에 복사됩니다.
이제 주소창이나 메모패드등 입력 가능한곳에서 붙여넣기(Ctrl+V)를 하시면 복사된 주소가 붙여넣기 됩니다.
텍스트박스의 내용을 바꿔서 실험해 보세요.. ^^
☆ 첨부한 예제파일에서 <script> 와 </script> 사이에 있는 자바스크립트 부분을 HTML 소스의
<head>와 </head> 사이에 붙여넣으시고 텍스트박스명을 [txtbox]로 하시면 되겠습니다.
그리고 버튼 태그에 아래 처럼 onclick="javascript:copyText('txtbox')"를 넣어주세요..
첨부해드린 예제파일을 바꿔가면서 테스트 해보시면 이해하시는데 도움이 되실거에요.. ^^
클립보드복사.txt<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> http://ezorigami.tistory.com/ </title> <meta name="Generator" content=""> <meta name="Author" content="종이언니"> <meta name="Keywords" content=""> <meta name="Description" content=""> <script> var init_copy = true; // 복사 function copyText(txt) { if(txtbox.value == "") { alert("클립보드에 저장할 문자를 입력 하세요."); txtbox.focus(); return; } if(init_copy == false) { init_copy = true; var oTag = eval(txt); var oRange = oTag.createTextRange(); oRange.execCommand("Copy"); init_copy = false; } else { var oTag = eval(txt); var oRange = oTag.createTextRange(); oRange.execCommand("Copy"); } alert("[" + txtbox.value + "]가 클립보드에 저장되었습니다. Ctrl+v를 눌러보세요."); txtbox.select(); } </script> </head> <body onload="javascript:txtbox.focus();"> <input type="textbox" name="txtbox" style="background-color:#FFFF80;width:300pt" value="http://ezorigami.tistory.com"> <input type="button" value="클립보드에 저장" onclick="javascript:copyText('txtbox')"> </body> </html>
댓글