★IT ~ !!!/WEB

자바스크립트(javascript)를 이용한 클립보드 복사 예제..

종이언니 2010. 10. 25. 17:09



다음이나 네이버같은 포털사이트에서 자주 볼수 있는 클립보드 복사 버튼에 대해 알아보겠습니다.
자바스크립트를 이용하여 버튼을 눌렀을때 텍스트박스에 있는 내용을 클립보드로 복사하여
다른 프로그램등에 붙여넣기(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>