질문자 :Santiago Corredoira
클립보드(멀티 브라우저)에 텍스트를 복사하는 가장 좋은 방법은 무엇입니까?
나는 시도했다:
function copyToClipboard(text) { if (window.clipboardData) { // Internet Explorer window.clipboardData.setData("Text", text); } else { unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper); clipboardHelper.copyString(text); } }
그러나 Internet Explorer에서는 구문 오류가 발생합니다. Firefox에서는 unsafeWindow가 정의되지 않았다고 표시됩니다 .
Flash 를 사용하지 않는 멋진 트릭: Trello는 사용자의 클립보드에 어떻게 액세스합니까?
개요
클립보드에 복사하기 위한 세 가지 기본 브라우저 API가 있습니다.
비동기 클립보드 API [navigator.clipboard.writeText]
- Chrome 66(2018년 3월) 에서 텍스트 중심 부분 사용 가능
- 액세스는 비동기식이며 JavaScript Promises를 사용하므로 보안 사용자 프롬프트(표시된 경우)가 페이지의 JavaScript를 중단하지 않도록 작성할 수 있습니다.
- 텍스트는 변수에서 직접 클립보드로 복사할 수 있습니다.
- HTTPS를 통해 제공되는 페이지에서만 지원됩니다.
- Chrome 66 페이지에서 비활성 탭은 권한 프롬프트 없이 클립보드에 쓸 수 있습니다.
document.execCommand('copy') ( 더 이상 사용되지 않음 )
- 대부분의 브라우저는 2015년 4월부터 이를 지원합니다(아래 브라우저 지원 참조).
- 액세스는 동기식입니다. 즉, 보안 프롬프트 표시 및 사용자 상호 작용을 포함하여 완료될 때까지 페이지에서 JavaScript를 중지합니다.
- 텍스트는 DOM에서 읽고 클립보드에 배치됩니다.
- 2015년 4월까지 테스트하는 동안 Internet Explorer만 클립보드에 쓰는 동안 권한 프롬프트를 표시하는 것으로 나타났습니다.
복사 이벤트 재정의
- 복사 이벤트 재정의에 대한 클립보드 API 문서를 참조하십시오.
- 모든 복사 이벤트에서 클립보드에 표시되는 내용을 수정할 수 있으며 일반 텍스트가 아닌 다른 형식의 데이터를 포함할 수 있습니다.
- 질문에 직접 대답하지 않으므로 여기에서 다루지 않습니다.
일반 개발 참고 사항
콘솔에서 코드를 테스트하는 동안 클립보드 관련 명령이 작동할 것으로 기대하지 마십시오. 일반적으로 페이지는 활성 상태(Async Clipboard API)이거나 사용자 상호 작용(예: 사용자 클릭)이 필요하므로( document.execCommand('copy') ) 클립보드에 액세스할 수 있습니다. 자세한 내용은 아래를 참조하세요.
중요 (여기에 2020/02/20 참고)
이 게시물은 원래 cross-origin IFRAME 및 기타 IFRAME "sandboxing" 에서 권한에 대한 비추천으로 작성되었기 때문에 포함된 데모 "Run code snippet" 버튼 및 "codepen.io example"이 일부 브라우저(Chrome 및 Microsoft Edge 포함)에서 작동하지 않습니다. ).
자신의 웹 페이지를 개발하려면 HTTPS 연결을 통해 해당 페이지를 제공하여 테스트하고 개발하십시오.
다음은 코드 작동을 보여주는 테스트/데모 페이지입니다. https://deanmarktaylor.github.io/clipboard-test/
비동기 + 대체
새로운 Async Clipboard API에 대한 브라우저 지원 수준으로 인해 좋은 브라우저 적용 범위를 얻으려면 document.execCommand('copy')
다음은 간단한 예입니다(이 사이트에 포함되어 작동하지 않을 수 있습니다. 위의 "중요" 참고 사항 참조).
function fallbackCopyTextToClipboard(text) { var textArea = document.createElement("textarea"); textArea.value = text; // Avoid scrolling to bottom textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Fallback: Copying text command was ' + msg); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); } function copyTextToClipboard(text) { if (!navigator.clipboard) { fallbackCopyTextToClipboard(text); return; } navigator.clipboard.writeText(text).then(function() { console.log('Async: Copying to clipboard was successful!'); }, function(err) { console.error('Async: Could not copy text: ', err); }); } var copyBobBtn = document.querySelector('.js-copy-bob-btn'), copyJaneBtn = document.querySelector('.js-copy-jane-btn'); copyBobBtn.addEventListener('click', function(event) { copyTextToClipboard('Bob'); }); copyJaneBtn.addEventListener('click', function(event) { copyTextToClipboard('Jane'); });
<div style="display:inline-block; vertical-align:top;"> <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br /> <button class="js-copy-jane-btn">Set clipboard to JANE</button> </div> <div style="display:inline-block;"> <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard: </textarea> </div>
(codepen.io 예제는 작동하지 않을 수 있습니다. 위의 "중요" 참고 사항을 읽으십시오.) 이 스니펫은 Stack Overflow의 포함된 미리보기에서 제대로 작동하지 않습니다. 여기에서 시도해 볼 수 있습니다: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors =1011
비동기 클립보드 API
Chrome 66의 권한 API를 통해 "권한을 요청"하고 클립보드에 대한 액세스를 테스트하는 기능이 있습니다.
var text = "Example text to appear on clipboard"; navigator.clipboard.writeText(text).then(function() { console.log('Async: Copying to clipboard was successful!'); }, function(err) { console.error('Async: Could not copy text: ', err); });
document.execCommand('복사')
document.execCommand('copy') API의 뉘앙스와 세부 사항에 대해 설명합니다.
브라우저 지원
JavaScript document.execCommand('copy') 지원이 증가했습니다. 브라우저 업데이트는 아래 링크를 참조하세요. ( 지원 중단됨 )
간단한 예
(이 사이트에 포함되어 작동하지 않을 수 있습니다. 위의 "중요" 참고 사항을 읽으십시오)
var copyTextareaBtn = document.querySelector('.js-textareacopybtn'); copyTextareaBtn.addEventListener('click', function(event) { var copyTextarea = document.querySelector('.js-copytextarea'); copyTextarea.focus(); copyTextarea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } });
<p> <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button> <textarea class="js-copytextarea">Hello I'm some text</textarea> </p>
복잡한 예: 입력을 표시하지 않고 클립보드에 복사
위의 간단한 예제는 화면에 보이는 textarea 이나 input 요소가 있는 경우 잘 작동합니다.
input / textarea 요소를 표시하지 않고 텍스트를 클립보드에 복사할 수 있습니다. 이것은 이 문제를 해결하는 방법의 한 예입니다(기본적으로 요소 삽입, 클립보드에 복사, 요소 제거).
Google Chrome 44, Firefox 42.0a1 및 Internet Explorer 11.0.8600.17814에서 테스트되었습니다.
(이 사이트에 포함되어 작동하지 않을 수 있습니다. 위의 "중요" 참고 사항을 읽으십시오)
function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); // // *** This styling is an extra step which is likely not required. *** // // Why is it here? To ensure: // 1. the element is able to have focus and selection. // 2. if the element was to flash render it has minimal visual impact. // 3. less flakyness with selection and copying which **might** occur if // the textarea element is not visible. // // The likelihood is the element won't even render, not even a // flash, so some of these are just precautions. However in // Internet Explorer the element is visible whilst the popup // box asking the user for permission for the web page to // copy to the clipboard. // // Place in the top-left corner of screen regardless of scroll position. textArea.style.position = 'fixed'; textArea.style.top = 0; textArea.style.left = 0; // Ensure it has a small width and height. Setting to 1px / 1em // doesn't work as this gives a negative w/h on some browsers. textArea.style.width = '2em'; textArea.style.height = '2em'; // We don't need padding, reducing the size if it does flash render. textArea.style.padding = 0; // Clean up any borders. textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; // Avoid flash of the white box if rendered for any reason. textArea.style.background = 'transparent'; textArea.value = text; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } document.body.removeChild(textArea); } var copyBobBtn = document.querySelector('.js-copy-bob-btn'), copyJaneBtn = document.querySelector('.js-copy-jane-btn'); copyBobBtn.addEventListener('click', function(event) { copyTextToClipboard('Bob'); }); copyJaneBtn.addEventListener('click', function(event) { copyTextToClipboard('Jane'); });
<div style="display:inline-block; vertical-align:top;"> <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br /> <button class="js-copy-jane-btn">Set clipboard to JANE</button> </div> <div style="display:inline-block;"> <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard: </textarea> </div>
추가 참고 사항
사용자가 조치를 취한 경우에만 작동
모든 document.execCommand('copy') 호출은 클릭 이벤트 핸들러와 같은 사용자 작업의 직접적인 결과로 발생해야 합니다. 이는 사용자가 예상하지 못한 경우 사용자의 클립보드를 엉망으로 만드는 것을 방지하기 위한 조치입니다.
자세한 내용은 여기에서 Google 개발자 게시물 을 참조하세요.
클립보드 API
전체 Clipboard API 초안 사양은 https://w3c.github.io/clipboard-apis/에서 찾을 수 있습니다.
지원되나요?
-
document.queryCommandSupported('copy') 는 명령이 "브라우저에서 지원되는" 경우 true 를 반환해야 합니다. - 및
document.queryCommandEnabled('copy') 반환 true 경우 생성 document.execCommand('copy') 지금이라고하면 성공합니다. 명령이 사용자 시작 스레드에서 호출되었고 기타 요구 사항이 충족되었는지 확인합니다.
그러나 브라우저 호환성 문제의 예로 2015년 4월부터 10월까지의 Chrome은 사용자가 시작한 스레드에서 명령을 호출한 경우 document.queryCommandSupported('copy') 에서 true
아래 호환성 세부 정보를 참고하십시오.
브라우저 호환성 세부 정보
try / catch 블록에 래핑된 document.execCommand('copy') 대한 간단한 호출은 다음과 같은 몇 가지 조건을 통해 최상의 호환성을 얻을 수 있습니다.
document.execCommand , document.queryCommandSupported 또는 document.queryCommandEnabled 에 대한 모든 호출 try / catch 블록으로 래핑되어야 합니다.
false 를 반환하는 대신 호출될 때 다른 유형의 예외를 throw합니다.
다른 브라우저 구현은 여전히 유동적이며 Clipboard API 는 아직 초안이므로 테스트를 수행하는 것을 잊지 마십시오.
클립보드에 자동으로 복사하는 것은 위험할 수 있으므로 대부분의 브라우저(Internet Explorer 제외)에서는 매우 어렵습니다. 개인적으로 다음과 같은 간단한 트릭을 사용합니다.
function copyToClipboard(text) { window.prompt("Copy to clipboard: Ctrl+C, Enter", text); }
복사할 텍스트가 이미 선택되어 있는 프롬프트 상자가 사용자에게 표시됩니다. 이제 Ctrl + C 와 Enter (상자 닫기)를 누르기만 하면 됩니다. 짜잔!
이제 클립보드 복사 작업은 안전 합니다. 사용자가 수동으로(그러나 매우 간단한 방법으로) 수행하기 때문입니다. 물론 모든 브라우저에서 작동합니다.
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button> <script> function copyToClipboard(text) { window.prompt("Copy to clipboard: Ctrl+C, Enter", text); } </script>
다음 접근 방식은 Chrome, Firefox, Internet Explorer 및 Edge와 최신 버전의 Safari에서 작동합니다(복사 지원은 2016년 10월 릴리스된 버전 10에 추가됨).
- 텍스트 영역을 만들고 그 내용을 클립보드에 복사하려는 텍스트로 설정합니다.
- DOM에 텍스트 영역을 추가합니다.
- 텍스트 영역에서 텍스트를 선택합니다.
- document.execCommand("복사") 호출
- 돔에서 텍스트 영역을 제거합니다.
참고: Javascript 코드의 동일한 동기 호출 내에서 추가 및 제거되기 때문에 텍스트 영역이 표시되지 않습니다.
직접 구현하는 경우 주의해야 할 사항:
- 보안상의 이유로 클릭과 같은 이벤트 핸들러에서만 호출할 수 있습니다(창을 열 때와 마찬가지로).
- Internet Explorer는 클립보드가 처음 업데이트될 때 권한 대화 상자를 표시합니다.
- Internet Explorer 및 Edge는 텍스트 영역에 포커스가 있을 때 스크롤됩니다.
- execCommand()는 경우에 따라 throw할 수 있습니다.
- 텍스트 영역을 사용하지 않으면 줄 바꿈과 탭을 삼킬 수 있습니다. (대부분의 기사는 div 사용을 권장하는 것 같습니다)
- Internet Explorer 대화 상자가 표시되는 동안 텍스트 영역이 표시됩니다. 이를 숨기거나 Internet Explorer 전용 clipboardData API를 사용해야 합니다.
- Internet Explorer에서 시스템 관리자는 클립보드 API를 비활성화할 수 있습니다.
아래 함수는 다음 문제를 최대한 깔끔하게 처리해야 합니다. 문제점을 발견하거나 개선을 위한 제안 사항이 있으면 의견을 남겨주세요.
// Copies a string to the clipboard. Must be called from within an // event handler such as click. May return false if it failed, but // this is not always possible. Browser support for Chrome 43+, // Firefox 42+, Safari 10+, Edge and Internet Explorer 10+. // Internet Explorer: The clipboard feature may be disabled by // an administrator. By default a prompt is shown the first // time the clipboard is used (per session). function copyToClipboard(text) { if (window.clipboardData && window.clipboardData.setData) { // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible. return window.clipboardData.setData("Text", text); } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) { var textarea = document.createElement("textarea"); textarea.textContent = text; textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in Microsoft Edge. document.body.appendChild(textarea); textarea.select(); try { return document.execCommand("copy"); // Security exception may be thrown by some browsers. } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } finally { document.body.removeChild(textarea); } } }
https://jsfiddle.net/fx6a6n6x/
다음은 그에 대한 제 의견입니다...
function copy(text) { var input = document.createElement('input'); input.setAttribute('value', text); document.body.appendChild(input); input.select(); var result = document.execCommand('copy'); document.body.removeChild(input); return result; }
@korayem: html input 필드를 사용하면 줄 바꿈을 고려하지 않고 \n 모든 텍스트를 한 줄로 병합합니다.
주석에서 @nikksan이 언급했듯이 textarea 를 사용하면 다음과 같이 문제가 해결됩니다.
function copy(text) { var input = document.createElement('textarea'); input.innerHTML = text; document.body.appendChild(input); input.select(); var result = document.execCommand('copy'); document.body.removeChild(input); return result; }
웹 페이지에서 클립보드를 읽고 수정하면 보안 및 개인 정보 보호 문제가 발생합니다. 그러나 Internet Explorer에서는 가능합니다. 이 예시 스니펫을 찾았습니다.
<script type="text/javascript"> function select_all(obj) { var text_val=eval(obj); text_val.focus(); text_val.select(); r = text_val.createTextRange(); if (!r.execCommand) return; // feature detection r.execCommand('copy'); } </script> <input value="http://www.sajithmr.com" onclick="select_all(this)" name="url" type="text" />
정말 간단한 솔루션(통합하는 데 5분 미만 소요)을 원하고 상자에서 꺼내자마자 좋아 보인다면 Clippy 는 좀 더 복잡한 솔루션에 대한 좋은 대안입니다.
GitHub의 공동 설립자가 작성했습니다. 아래 예제 플래시 포함 코드:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy"> <param name="movie" value="/flash/clippy.swf"/> <param name="allowScriptAccess" value="always"/> <param name="quality" value="high"/> <param name="scale" value="noscale"/> <param NAME="FlashVars" value="text=#{text}"/> <param name="bgcolor" value="#{bgcolor}"/> <embed src="/flash/clippy.swf" width="110" height="14" name="clippy" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="text=#{text}" bgcolor="#{bgcolor}"/> </object>
#{text} 를 복사해야 하는 텍스트 #{bgcolor} 를 색상으로 바꾸는 것을 잊지 마십시오.
나는 최근 에 바로 이 문제에 대한 기술 블로그 게시물 을 작성했습니다(저는 Lucidchart에서 일하고 있으며 최근에 클립보드를 점검했습니다).
일반 텍스트를 클립보드에 복사하는 것은 시스템 복사 이벤트(사용자가 Ctrl + C를 누르거나 브라우저 메뉴를 사용함) 중에 복사를 시도한다고 가정하면 비교적 간단합니다.
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 || navigator.userAgent.toLowerCase().indexOf("trident") != -1); document.addEventListener('copy', function(e) { var textToPutOnClipboard = "This is some text"; if (isIe) { window.clipboardData.setData('Text', textToPutOnClipboard); } else { e.clipboardData.setData('text/plain', textToPutOnClipboard); } e.preventDefault(); });
시스템 복사 이벤트가 아닌 클립보드에 텍스트를 넣는 것은 훨씬 더 어렵습니다. 이 다른 답변 중 일부는 Flash를 통해 수행하는 방법을 참조하는 것 같습니다. 이 방법은 브라우저 간 유일한 방법입니다(내가 이해하는 한).
그 외에도 브라우저별로 몇 가지 옵션이 있습니다.
다음을 통해 JavaScript에서 언제든지 clipboardData 개체에 액세스할 수 있는 Internet Explorer에서 가장 간단합니다.
window.clipboardData
(그러나 시스템 잘라내기, 복사 또는 붙여넣기 이벤트 외부에서 이 작업을 수행하려고 하면 Internet Explorer에서 사용자에게 웹 응용 프로그램 클립보드 권한을 부여하라는 메시지를 표시합니다.)
Chrome에서 클립보드 권한 을 제공하는 Chrome 확장 프로그램을 만들 수 있습니다(이것이 Lucidchart에서 하는 일입니다). 그런 다음 확장 프로그램이 설치된 사용자의 경우 시스템 이벤트를 직접 실행하기만 하면 됩니다.
document.execCommand('copy');
Firefox에는 사용자가 클립보드에 액세스할 수 있는 특정 사이트에 권한을 부여할 수 있는 몇 가지 옵션 이 있는 것 같지만 개인적으로 시도해 본 적은 없습니다.
난이게 좋아:
<input onclick="this.select();" type='text' value='copy me' />
사용자가 OS에서 텍스트를 복사하는 방법을 모른다면 붙여넣는 방법도 모를 가능성이 큽니다. 따라서 자동으로 선택하고 나머지는 사용자에게 맡기십시오.
clipboard.js 는 텍스트 또는 HTML 데이터를 클립보드에 복사할 수 있는 작은 비 플래시 유틸리티입니다. 사용하기 매우 쉽습니다. .js를 포함하고 다음과 같이 사용하면 됩니다.
<button id='markup-copy'>Copy Button</button> <script> document.getElementById('markup-copy').addEventListener('click', function() { clipboard.copy({ 'text/plain': 'Markup text. Paste me into a rich text editor.', 'text/html': '<i>here</i> is some <b>rich text</b>' }).then( function(){console.log('success'); }, function(err){console.log('failure', err); }); }); </script>
clipboard.js는 GitHub 에도 있습니다.
참고: 이제 더 이상 사용되지 않습니다. 여기로 마이그레이션하십시오.
2018년에는 다음과 같이 할 수 있습니다.
async copySomething(text?) { try { const toCopy = text || location.href; await navigator.clipboard.writeText(toCopy); console.log('Text or Page URL copied'); } catch (err) { console.error('Failed to copy: ', err); } }
다음과 같이 내 Angular 6+ 코드에서 사용됩니다.
<button mat-menu-item (click)="copySomething()"> <span>Copy link</span> </button>
문자열을 전달하면 복사합니다. 아무것도 없으면 페이지의 URL을 복사합니다.
클립보드에 더 많은 체조도 할 수 있습니다. 여기에서 더 많은 정보를 확인하세요:
클립보드 액세스 차단 해제
나는 이것을 매우 성공적으로 사용합니다(jQuery 또는 다른 프레임워크 없이).
function copyToClp(txt){ var m = document; txt = m.createTextNode(txt); var w = window; var b = m.body; b.appendChild(txt); if (b.createTextRange) { var d = b.createTextRange(); d.moveToElementText(txt); d.select(); m.execCommand('copy'); } else { var d = m.createRange(); var g = w.getSelection; d.selectNodeContents(txt); g().removeAllRanges(); g().addRange(d); m.execCommand('copy'); g().removeAllRanges(); } txt.remove(); }
경고
탭은 공백으로 변환됩니다(적어도 Chrome에서는).
ZeroClipboard는 내가 찾은 최고의 크로스 브라우저 솔루션입니다.
<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div> <script src="ZeroClipboard.js"></script> <script> var clip = new ZeroClipboard( document.getElementById('copy') ); </script>
iOS에 대한 비 Flash 지원이 필요한 경우 대체를 추가하기만 하면 됩니다.
clip.on( 'noflash', function ( client, args ) { $("#copy").click(function(){ var txt = $(this).attr('data-clipboard-text'); prompt ("Copy link, then click OK.", txt); }); });
http://zeroclipboard.org/
https://github.com/zeroclipboard/ZeroClipboard
Chrome 42+ 및 Firefox 41+는 이제 document.execCommand('copy') 명령을 지원하므로 Tim Down의 이전 답변 과 Google 개발자의 답변을 조합하여 브라우저 간 클립보드 복사 기능을 위한 몇 가지 기능을 만들었습니다. :
function selectElementContents(el) { // Copy textarea, pre, div, etc. if (document.body.createTextRange) { // Internet Explorer var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.select(); textRange.execCommand("Copy"); } else if (window.getSelection && document.createRange) { // Non-Internet Explorer var range = document.createRange(); range.selectNodeContents(el); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } } } // end function selectElementContents(el) function make_copy_button(el) { var copy_btn = document.createElement('input'); copy_btn.type = "button"; el.parentNode.insertBefore(copy_btn, el.nextSibling); copy_btn.onclick = function() { selectElementContents(el); }; if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) { // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+ copy_btn.value = "Copy to Clipboard"; } else { // Select only for Safari and older Chrome, Firefox and Opera copy_btn.value = "Select All (then press Ctrl + C to Copy)"; } } /* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy, but there was a bug in Chrome versions 42 to 47 that makes it return "false". So in those versions of Chrome feature detection does not work! See https://code.google.com/p/chromium/issues/detail?id=476508 */ make_copy_button(document.getElementById("markup"));
<pre id="markup"> Text that can be copied or selected with cross browser support. </pre>
제가 작업한 프로젝트 중 하나에서 ZeroClipboard 라이브러리를 활용하는 jQuery 클립보드로 복사 플러그인입니다.
jQuery를 많이 사용하는 경우 기본 Zero Clipboard 플러그인보다 사용하기 쉽습니다.
$("td").click(function (e) { var clickedCell = $(e.target).closest("td"); navigator.clipboard.writeText(clickedCell.text()); alert(clickedCell.text()); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>First<td> </tr> <tr> <td>Second<td> </tr> <tr> <td>Third<td> </tr> <tr> <td>Fourth<td> </tr> </table>
2020년 6월 1일 현재 모든 답변을 읽었으며 마침내 문서를 찾았을 때 이 문제를 해결하기 위해 고군분투했습니다.
$("td").click(function (e) { var clickedCell = $(e.target).closest("td"); navigator.clipboard.writeText(clickedCell.text()); });
클릭한 셀 텍스트를 브라우저 클립보드에 씁니다.
선택기 "td"를 원하는 대로 변경할 수 있으며 디버깅 및/또는 경고 기능을 위해 console.log를 추가할 수 있습니다.
문서는 다음과 같습니다. https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
가장 좋다고 생각되는 것들을 모아봤습니다.
- 직접 스타일 대신 Internet Explorer에서 예외를 피하기 위해 cssText를 사용합니다.
- 하나가 있는 경우 선택을 복원합니다.
- 키보드가 모바일 장치에 나타나지 않도록 읽기 전용으로 설정합니다.
- 일반적으로 execCommand를 차단하는 것처럼 실제로 작동하도록 iOS에 대한 해결 방법이 있습니다.
여기있어:
const copyToClipboard = (function initClipboardText() { const textarea = document.createElement('textarea'); // Move it off-screen. textarea.style.cssText = 'position: absolute; left: -99999em'; // Set to readonly to prevent mobile devices opening a keyboard when // text is .select()'ed. textarea.setAttribute('readonly', true); document.body.appendChild(textarea); return function setClipboardText(text) { textarea.value = text; // Check if there is any content selected previously. const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; // iOS Safari blocks programmatic execCommand copying normally, without this hack. // https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios if (navigator.userAgent.match(/ipad|ipod|iphone/i)) { const editable = textarea.contentEditable; textarea.contentEditable = true; const range = document.createRange(); range.selectNodeContents(textarea); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); textarea.setSelectionRange(0, 999999); textarea.contentEditable = editable; } else { textarea.select(); } try { const result = document.execCommand('copy'); // Restore previous selection. if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } return result; } catch (err) { console.error(err); return false; } }; })();
사용법: copyToClipboard('some text')
다음 솔루션을 찾았습니다.
on-key-down 핸들러는 "pre" 태그를 생성합니다. 이 태그에 복사할 내용을 설정한 다음 이 태그를 선택하고 핸들러에서 true를 반환합니다. 이것은 Chrome의 표준 핸들러를 호출하고 선택한 텍스트를 복사합니다.
그리고 필요한 경우 이전 선택을 복원하는 기능에 대한 시간 초과를 설정할 수 있습니다. MooTools 에 대한 내 구현 :
function EnybyClipboard() { this.saveSelection = false; this.callback = false; this.pastedText = false; this.restoreSelection = function() { if (this.saveSelection) { window.getSelection().removeAllRanges(); for (var i = 0; i < this.saveSelection.length; i++) { window.getSelection().addRange(this.saveSelection[i]); } this.saveSelection = false; } }; this.copyText = function(text) { var div = $('special_copy'); if (!div) { div = new Element('pre', { 'id': 'special_copy', 'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;' }); div.injectInside(document.body); } div.set('text', text); if (document.createRange) { var rng = document.createRange(); rng.selectNodeContents(div); this.saveSelection = []; var selection = window.getSelection(); for (var i = 0; i < selection.rangeCount; i++) { this.saveSelection[i] = selection.getRangeAt(i); } window.getSelection().removeAllRanges(); window.getSelection().addRange(rng); setTimeout(this.restoreSelection.bind(this), 100); } else return alert('Copy did not work. :('); }; this.getPastedText = function() { if (!this.pastedText) alert('Nothing to paste. :('); return this.pastedText; }; this.pasteText = function(callback) { var div = $('special_paste'); if (!div) { div = new Element('textarea', { 'id': 'special_paste', 'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;' }); div.injectInside(document.body); div.addEvent('keyup', function() { if (this.callback) { this.pastedText = $('special_paste').get('value'); this.callback.call(null, this.pastedText); this.callback = false; this.pastedText = false; setTimeout(this.restoreSelection.bind(this), 100); } }.bind(this)); } div.set('value', ''); if (document.createRange) { var rng = document.createRange(); rng.selectNodeContents(div); this.saveSelection = []; var selection = window.getSelection(); for (var i = 0; i < selection.rangeCount; i++) { this.saveSelection[i] = selection.getRangeAt(i); } window.getSelection().removeAllRanges(); window.getSelection().addRange(rng); div.focus(); this.callback = callback; } else return alert('Failed to paste. :('); }; }
용법:
enyby_clip = new EnybyClipboard(); // Init enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true; enyby_clip.pasteText(function callback(pasted_text) { alert(pasted_text); }); // Place this in Ctrl+V handler and return true;
붙여넣을 때 텍스트 영역을 만들고 동일한 방식으로 작동합니다.
추신: 이 솔루션은 Flash 없이 완전한 크로스 브라우저 솔루션을 만드는 데 사용할 수 있습니다. Firefox 및 Chrome에서 작동합니다.
다른 방법은 일반 텍스트를 클립보드에 복사합니다. HTML을 복사하려면(즉, 결과를 WYSIWYG 편집기에 붙여넣을 수 있음) Internet Explorer 에서만 다음을 수행할 수 있습니다. 이것은 브라우저가 실제로 시각적으로 콘텐츠를 선택하기 때문에 다른 방법과 근본적으로 다릅니다.
// Create an editable DIV and append the HTML content you want copied var editableDiv = document.createElement("div"); with (editableDiv) { contentEditable = true; } editableDiv.appendChild(someContentElement); // Select the editable content and copy it to the clipboard var r = document.body.createTextRange(); r.moveToElementText(editableDiv); r.select(); r.execCommand("Copy"); // Deselect, so the browser doesn't leave the element visibly selected r.moveToElementText(someHiddenDiv); r.select();
이 코드는 2021년 5월에 테스트되었습니다. Chrome, IE, Edge에서 작업하세요. 아래의 'message' 매개변수는 복사하려는 문자열 값입니다.
<script type="text/javascript"> function copyToClipboard(message) { var textArea = document.createElement("textarea"); textArea.value = message; textArea.style.opacity = "0"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; alert('Copying text command was ' + msg); } catch (err) { alert('Unable to copy value , error : ' + err.message); } document.body.removeChild(textArea); } </script>
Flash 10부터는 Flash 객체와의 사용자 상호 작용에서 액션이 시작되는 경우에만 클립보드에 복사할 수 있습니다. ( Adobe의 Flash 10 발표에서 관련 섹션을 읽으십시오 .)
해결 방법은 복사 버튼 또는 복사를 시작하는 모든 요소 위에 Flash 개체를 오버레이하는 것입니다. ZeroClipboard는 현재 이 구현이 가능한 최고의 라이브러리입니다. 숙련된 Flash 개발자는 자신만의 라이브러리를 만들고 싶을 수 있습니다.
다음 솔루션을 찾았습니다.
숨겨진 입력에 텍스트가 있습니다. setSelectionRange 는 숨겨진 입력에서 작동하지 않기 때문에 일시적으로 유형을 텍스트로 변경하고 텍스트를 복사한 다음 다시 숨겼습니다. 요소에서 텍스트를 복사하려는 경우 해당 텍스트를 함수에 전달하고 해당 내용을 대상 변수에 저장할 수 있습니다.
jQuery('#copy').on('click', function () { copyToClipboard(); }); function copyToClipboard() { var target = jQuery('#hidden_text'); // Make it visible, so can be focused target.attr('type', 'text'); target.focus(); // Select all the text target[0].setSelectionRange(0, target.val().length); // Copy the selection var succeed; try { succeed = document.execCommand("copy"); } catch (e) { succeed = false; } // Hide input again target.attr('type', 'hidden'); return succeed; }
이미 많은 답변이 있지만 하나(jQuery)를 추가하는 것과 같습니다. 모든 브라우저에서 잘 작동하며 모바일에서도 잘 작동합니다(즉, 보안에 대한 프롬프트가 표시되지만 수락하면 제대로 작동함).
function appCopyToClipBoard(sText) { var oText = false, bResult = false; try { oText = document.createElement("textarea"); $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus(); oText.select(); document.execCommand("Copy"); bResult = true; } catch(e) { } $(oText).remove(); return bResult; }
코드에서:
if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.')) { alert('Sorry, copy to clipboard failed.'); }
HTML 입력에서 클립보드로 텍스트 복사:
function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); /* Copy the text inside the text field */ document.execCommand("Copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); }
<!-- The text field --> <input type="text" value="Hello Friend" id="myInput"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button>
참고: document.execCommand() 메서드는 Internet Explorer 9 및 이전 버전에서 지원되지 않습니다.
출처 : W3Schools - 클립보드에 텍스트 복사
Excel과 같은 사용자 지정 그리드 편집 및 Excel과의 호환성을 구축하는 데 동일한 문제가 있었습니다. 여러 셀 선택, 복사 및 붙여넣기를 지원해야 했습니다.
솔루션: 사용자가 복사할 데이터를 삽입할 텍스트 영역을 만들고(사용자가 셀을 선택할 때 저에게) 포커스를 설정하고(예: 사용자가 Ctrl 키를 누를 때) 전체 텍스트를 선택합니다.
따라서 사용자가 Ctrl + C 를 누르면 선택한 셀이 복사됩니다. 테스트 후 텍스트 영역의 크기를 1픽셀로 조정했습니다(디스플레이에서 작동하는지 테스트하지 않았습니다:없음). 모든 브라우저에서 잘 작동하며 사용자에게 투명합니다.
붙여 넣기 - 이와 같이 할 수 있습니다 (대상에 따라 다름) - 텍스트 영역에 집중하고 onpaste를 사용하여 붙여 넣기 이벤트를 잡습니다 (내 프로젝트에서는 편집하기 위해 셀의 텍스트 영역을 사용합니다).
예제(상업 프로젝트)를 붙여넣을 수는 없지만 아이디어는 알 수 있습니다.
이것은 다른 답변 사이의 약간의 조합입니다.
var copyToClipboard = function(textToCopy){ $("body") .append($('<textarea name="fname" class="textToCopyInput"/>' ) .val(textToCopy)) .find(".textToCopyInput") .select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; alert('Text copied to clipboard!'); } catch (err) { window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy); } $(".textToCopyInput").remove(); }
jQuery를 사용하지만 당연히 그럴 필요는 없습니다. 원하는 경우 변경할 수 있습니다. 나는 그냥 내 처분에 jQuery가 있었다. 입력이 표시되지 않도록 CSS를 추가할 수도 있습니다. 예를 들어 다음과 같습니다.
.textToCopyInput{opacity: 0; position: absolute;}
또는 물론 인라인 스타일링을 할 수도 있습니다.
.append($('<textarea name="fname" style="opacity: 0; position: absolute;" class="textToCopyInput"/>' )
Internet Explorer 이외의 브라우저에서는 작은 Flash 개체를 사용하여 클립보드를 조작해야 합니다.
나는 clipboard.js를 사용했습니다.
npm에서 얻을 수 있습니다.
npm install clipboard --save
그리고 Bower에서도
bower install clipboard --save
사용법 및 예제는 https://zenorocha.github.io/clipboard.js/ 에 있습니다.
선택한 텍스트('복사할 텍스트')를 클립보드에 복사하려면 Bookmarklet(JavaScript를 실행하는 브라우저 책갈피)을 만들고 실행(클릭)합니다. 임시 텍스트 영역이 생성됩니다.
GitHub의 코드:
https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d
(function (text) { var node = document.createElement('textarea'); var selection = document.getSelection(); node.textContent = text; document.body.appendChild(node); selection.removeAllRanges(); node.select(); document.execCommand('copy'); selection.removeAllRanges(); document.body.removeChild(node); })('Text To Copy');
이것은 Internet Explorer 9의 DIV뿐만 아니라 IMAGE 및 TABLE 요소에 대해 작동한다는 이점이 있는 Chase Seibert의 답변 확장입니다.
if (document.createRange) { // Internet Explorer 9 and modern browsers var r = document.createRange(); r.setStartBefore(to_copy); r.setEndAfter(to_copy); r.selectNode(to_copy); var sel = window.getSelection(); sel.addRange(r); document.execCommand('Copy'); // Does nothing on Firefox } else { // Internet Explorer 8 and earlier. This stuff won't work // on Internet Explorer 9. // (unless forced into a backward compatibility mode, // or selecting plain divs, not img or table). var r = document.body.createTextRange(); r.moveToElementText(to_copy); r.select() r.execCommand('Copy'); }
function copytoclipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val('0' + element).select(); document.execCommand("copy"); $temp.remove(); }
출처 : http:www.stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript