위키
포럼
도구
바뀐글
랜덤

"JavaScript 클립보드로 복사하기"의 두 판 사이의 차이

잔글 (로봇: 자동으로 텍스트 교체 (-http://jmnote.com/js/ +http://zetawiki.com/ex/js/))
 
(사용자 6명의 중간 판 43개는 보이지 않습니다)
2번째 줄: 2번째 줄:
;JavaScript 클립보드로 복사하기
;JavaScript 클립보드로 복사하기
;자바스크립트 클립보드 복사
;자바스크립트 클립보드 복사
*자동으로 복사하는 것은 [[인터넷 익스플로러]]만 가능
*플래시를 활용하면 다른 브라우저도 가능 ([[ZeroClipboard]] 참고)


==예시 1: 자동복사==
==예시 1: textarea 임시 생성하여 복사 ★==
*인터넷 익스플로러만 가능
{{참고|순수 자바스크립트 클립보드 복사 구현}}
*예제: http://zetawiki.com/ex/js/clipboard.php
<syntaxhighlight lang='html' run outheight='80'>
<source lang='html5'>
<button onclick="copy()">COPY</button>
 
<script>
function copyToClipboard(val) {
  const t = document.createElement("textarea");
  document.body.appendChild(t);
  t.value = val;
  t.select();
  document.execCommand('copy');
  document.body.removeChild(t);
}
function copy() {
  copyToClipboard('Hello World');
  console.log('Copied!');
}
</script>
</syntaxhighlight>
 
==예시 2: input에서 복사==
* IE 10+, Chrome 43+, Opera 29+, Firefox 가능
<syntaxhighlight lang='html' run>
<input id="myInput" value="Hello, World!">
<button onclick="copy_to_clipboard()">클립보드로 복사</button>
 
<script>
function copy_to_clipboard() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  console.log('Copied!');
}
</script>
</syntaxhighlight>
 
==예시 3: 구식 IE==
* 인터넷 익스플로러만 가능
<syntaxhighlight lang='html' run>
<script type="text/javaScript">
<script type="text/javaScript">
function copy_to_clipboard(str) {
function copy_to_clipboard(str) {
17번째 줄: 51번째 줄:


<button onclick="copy_to_clipboard('Hello Jmnote');">복사</button>
<button onclick="copy_to_clipboard('Hello Jmnote');">복사</button>
</source>
</syntaxhighlight>
 
==예시 2: 자동 수동 혼합==
*익스플로러가 아닐 경우 [[prompt]]를 띄워 수동으로 복사(Ctrl+C)하도록 함
*예제: http://zetawiki.com/ex/js/clipboard2.php
<source lang='html5'>
<script type="text/javaScript">
function is_ie() {
  if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1) return false;
  if(navigator.userAgent.toLowerCase().indexOf("msie") != -1) return true;
  if(navigator.userAgent.toLowerCase().indexOf("windows nt") != -1) return true;
  return false;
}
function copy_to_clipboard(str) {
  if( is_ie() ) {
    window.clipboardData.setData("Text", str);
    alert("복사되었습니다.");
    return;
  }
  prompt("Ctrl+C를 눌러 복사하세요.", str);
}
</script>
<button onclick="copy_to_clipboard('Hello Jmnote2');">복사</button>
</source>


==같이 보기==
==같이 보기==
49번째 줄: 58번째 줄:
*[[함수 is_ie]]
*[[함수 is_ie]]


==참고 자료==
==참고==
*http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
*http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript


[[분류: JavaScript]]
[[분류: JavaScript]]
[[분류: 클립보드]]

2021년 4월 22일 (목) 00:39 기준 최신판

1 개요

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

2 예시 1: textarea 임시 생성하여 복사 ★

순수 자바스크립트 클립보드 복사 구현 문서를 참고하십시오.
<button onclick="copy()">COPY</button>

<script>
function copyToClipboard(val) {
  const t = document.createElement("textarea");
  document.body.appendChild(t);
  t.value = val;
  t.select();
  document.execCommand('copy');
  document.body.removeChild(t);
}
function copy() {
  copyToClipboard('Hello World');
  console.log('Copied!');
}
</script>

3 예시 2: input에서 복사

  • IE 10+, Chrome 43+, Opera 29+, Firefox 가능
<input id="myInput" value="Hello, World!">
<button onclick="copy_to_clipboard()">클립보드로 복사</button>

<script>
function copy_to_clipboard() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  console.log('Copied!');
}
</script>

4 예시 3: 구식 IE

  • 인터넷 익스플로러만 가능
<script type="text/javaScript">
function copy_to_clipboard(str) {
  window.clipboardData.setData("Text", str);
  alert("복사되었습니다.");
}
</script>

<button onclick="copy_to_clipboard('Hello Jmnote');">복사</button>

5 같이 보기

6 참고

원본 주소 "https://zetawiki.com/w/index.php?title=JavaScript_클립보드로_복사하기&oldid=739813"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}