[Html 가이드] 클립보드로 텍스트를 복사해주는 html 스크립트 배우기

간단히 클립보드로 지정된 텍스트를 복사해주는 html 스크립트를 만들어보자.

이러한 기능의 필요성은 소스에 대한 공부나 혹은 필요한 텍스트 데이타를 고객에게 손쉽게 제공해 줄 수 있는 역할을 해 줄수가 있다.

예제는 다음과 같다.

Source-File name : copy_to_clip_board.html     |     [Download_none]    |     Type : Java script + html     |     클립보드로 복사 (본문 클릭)

<script> // 클립보드로 복사하는 기능을 생성 function copyToClipboard(elementId) { // 글을 쓸 수 있는 란을 만든다. var aux = document.createElement("input"); // 지정된 요소의 값을 할당 한다. aux.setAttribute("value", document.getElementById(elementId).innerHTML); // bdy에 추가한다. document.body.appendChild(aux); // 지정된 내용을 강조한다. aux.select(); // 텍스트를 카피 하는 변수를 생성 document.execCommand("copy"); // body 로 부터 다시 반환 한다. document.body.removeChild(aux); } </script> <!--복사할 텍스트 만들기--> <p id="text1">텍스트 복사에 성공 하였습니다. </p> <!--// 버튼 만들기--> <button onclick="copyToClipboard('text1')">텍스트 복사하기</button> <!--input 란 만들기--> <br /><br /><input placeholder="이곳에 ctrl+v로 붙여넣기 테스트" type="text">

실행 결과

---

텍스트 복사에 성공 하였습니다.

---

도움이 되셨다면 '♡' 버튼을 꼭눌러 주시면 감사 하겠습니다.