자바스크립트 클립보드로 텍스트 복사하기

허니팁 2020. 10. 11. 21:54

728x90

텍스트를 복사하는 기능에 대해 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Copy Test Page</title>
</head>
<body>


<script>
	// 클립보드로 복사하는 기능을 생성
	function clipBoard(elementId) {

  	// 글을 쓸 수 있는 란을 만든다.
  	var aux = document.createElement("input");
	
  	// 지정된 요소의 값을 할당 한다.
  	aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  	// body에 추가.
  	document.body.appendChild(aux);

  	// 지정된 내용을 강조한다.
  	aux.select();

  	// 텍스트를 카피 하는 변수를 생성
  	document.execCommand("copy");

  	// body 로 부터 다시 반환 한다.
  	document.body.removeChild(aux);
  
  	//alert(aux.value);
  	alert("텍스트 복사에 성공 하였습니다.");
}
</script>


<!--복사할 텍스트 만들기-->
<p id="text">안녕하세요. 만나서 반갑습니다.</p>

<input type="button" onclick="clipBoard('text')" value="텍스트 복사하기"/>

<br/><br/>
<input placeholder="ctrl+v로 복사한 텍스트 붙여넣기" type="text" size=30/>


</body>
</html>

안녕하세요. 만나서 반갑습니다.

728x90