[ 자바스크립트 프로그래밍 ] 텍스트를 클립보드에 복사(copy)하기

안녕하세요. 제임스 입니다. 

웹에서 특정 문구를 복사 하거 버튼 하나 클릭으로 링크를 복사하는 방법을 알아 보겠습니다. 

■ 텍스트를 클립보드에 복사(copy)하기

위와 같이 input 의 value 값을 복사후 ctrl + v (붙여넣기) 또는 마우스 우클릭 후 붙여넣기 하는 방법에 대해 정리 해보겠습니다. 

▶ HTML code

<input type="text" id="inputField" style="width: 200px;">
<button onclick="copyText()">문구 복사하기</button>
<br><br>
<p>※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요</p>
<input type="text" style="width: 200px;">

id 값이 inputField 인 input 태그의 입력 값을 버튼을 클릭하여 클립보드에 복사 하고자 합니다. 

그리고 아래 input 태그에 붙여 넣기를 해보는 방식으로 처리 하겠습니다. 

▶ Javascript Code

var copyText = function(){
    var textField = document.getElementById('inputField');
    textField.select();
    document.execCommand('copy');
}

var textField = document.getElementById('inputField');

textField 라는 변수에 inputField 라는 id 를 가진 요소를 담습니다. 

textField.select();

textField 라는 요소를 선택 합니다. 

document.execCommand('copy');

document.execCommand 는 명령어를 실행하기 위해 사용 하는 함수입니다. 

명령어 종류는 copy, cut, delete 등등, 많은 명령어들이 지원되고 있습니다. 

참조) https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

여기서는 copy 를 사용했습니다. 즉, 선택된 영역의 값을 복사 한다는 의미 입니다. 

위 내용들만 있으면 작업은 끝났습니다. 실제 위 코드가 적용된 화면을 보시겠습니다. 

※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요

첫번째 input 에 원하는 문구를 입력 후 문구 복사하기 버튼을 클릭 합니다. 

두번째 input 에 붙여넣기 (ctrl + v) 또는 마우스 우클릭 후 붙여넣기 선택 하시면 클립보드에 복사된 내용이 붙여넣기 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D