안녕하세요. 제임스 입니다.
웹에서 특정 문구를 복사 하거 버튼 하나 클릭으로 링크를 복사하는 방법을 알아 보겠습니다.
■ 텍스트를 클립보드에 복사(copy)하기
위와 같이 input 의 value 값을 복사후 ctrl + v (붙여넣기) 또는 마우스 우클릭 후 붙여넣기 하는 방법에 대해 정리 해보겠습니다.
▶ HTML code
1 2 3 4 5 | <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;"> | cs |
id 값이 inputField 인 input 태그의 입력 값을 버튼을 클릭하여 클립보드에 복사 하고자 합니다.
그리고 아래 input 태그에 붙여 넣기를 해보는 방식으로 처리 하겠습니다.
▶ Javascript Code
1 2 3 4 5 | var copyText = function(){ var textField = document.getElementById('inputField'); textField.select(); document.execCommand('copy'); } | cs |
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
'javascript' 카테고리의 다른 글
| [ 자바스크립트 프로그래밍 ] 자바스크립트 타이머 setTimeout (1197) | 2018.08.01 |
|---|---|
| [ 자바스크립트 프로그래밍 ] 텍스트 잘라내기 및 붙여넣기 (cut and paste) (1186) | 2018.07.26 |
| [ javascript 코딩 ] 자바 스크립트 - 데이터 유형 (1207) | 2018.05.31 |
| [ javascript 코딩 ] Variable scope (1209) | 2018.05.23 |
| [ javascript 코딩 ] 자바스크립트 재미있게 배우는 사이트 (1528) | 2018.05.21 |
쉬운코딩이최고
Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.