IE10 이상에서는 Document.execCommand() 메서드를 통해 '잘라내기' 및 '복사' 명령어에 대한 지원을 추가했습니다. Chrome 버전 43부터 이러한 명령어는 Chrome에서도 지원됩니다.
이러한 명령어 중 하나가 실행될 때 브라우저에서 선택된 모든 텍스트는 잘리거나 사용자의 클립보드에 복사됩니다. 이렇게 하면 사용자에게 텍스트의 일부를 선택하여 클립보드에 복사하는 간단한 방법을 제공할 수 있습니다.
Selection API와 결합하여 프로그래매틱 방식으로 텍스트를 선택하여 클립보드에 복사할 항목을 결정하는 데 매우 유용합니다. 이 내용은 이 도움말의 뒷부분에서 자세히 살펴봅니다.
간단한 예
예를 들어 이메일 주소를 사용자의 클립보드에 복사하는 버튼을 추가해 보겠습니다.
HTML에 이메일 주소를 추가하고 클릭 시 복사를 시작하는 버튼을 추가합니다.
<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>
<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>
그런 다음 JavaScript에서 버튼에 클릭 이벤트 핸들러를 추가하여 js-emaillink 앵커에서 이메일 주소 텍스트를 선택하고, 이메일 주소가 사용자의 클립보드에 있도록 복사 명령어를 실행한 다음, 사용자가 선택이 이루어지는 것을 보지 못하도록 이메일 주소를 선택 해제합니다.
var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
// Select the email link anchor text
var emailLink = document.querySelector('.js-emaillink');
var range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);
try {
// Now that we've selected the anchor text, execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
});
여기서는 Selection API의 메서드인 window.getSelection()을 사용하여 텍스트의 '선택'을 사용자의 클립보드에 복사할 텍스트인 앵커로 프로그래매틱 방식으로 설정합니다. document.execCommand()를 호출한 후 window.getSelection().removeAllRanges()를 호출하여 선택 항목을 삭제할 수 있습니다. 모든 것이 예상대로 작동하는지 확인하려면 document.execCommand()의 응답을 검사하면 명령어가 지원되지 않거나 사용 설정되지 않으면 false가 반환됩니다. 'cut' 및 'copy' 명령어가 몇 가지 시나리오에서 오류를 발생시킬 수 있으므로 execCommand()를 try 및 catch로 래핑합니다.
'cut' 명령어는 텍스트 콘텐츠를 삭제하고 클립보드를 통해 액세스할 수 있도록 하려는 텍스트 필드에 사용할 수 있습니다.
HTML에서 textarea 및 버튼을 사용하는 방법은 다음과 같습니다.
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>
콘텐츠를 잘라내는 방법은 다음과 같습니다.
var cutTextareaBtn = document.querySelector('.js-textareacutbtn');
cutTextareaBtn.addEventListener('click', function(event) {
var cutTextarea = document.querySelector('.js-cuttextarea');
cutTextarea.select();
try {
var successful = document.execCommand('cut');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Cutting text command was ' + msg);
} catch(err) {
console.log('Oops, unable to cut');
}
});
queryCommandSupported 및 queryCommandEnabled
document.execCommand()를 호출하기 전에 document.queryCommandSupported() 메서드를 사용하여 이 API가 지원되는지 확인해야 합니다. 위의 예에서는 지원에 따라 버튼 사용 중지 상태를 다음과 같이 설정할 수 있습니다.
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
document.queryCommandSupported()와 document.queryCommandEnabled()의 차이점은 잘라내기 및 복사는 브라우저에서 지원할 수 있지만 현재 선택된 텍스트가 없으면 사용 설정되지 않는다는 점입니다. 이는 텍스트 선택을 프로그래매틱 방식으로 설정하지 않고 명령어가 예상대로 실행되는지 확인하거나 그렇지 않은 경우 사용자에게 메시지를 표시하려는 시나리오에서 유용합니다.
브라우저 지원
IE 10 이상, Chrome 43 이상, Firefox 41 이상, Opera 29 이상에서 이러한 명령을 지원합니다.
Safari에서는 이러한 명령어를 지원하지 않습니다.