잘라내기 및 복사 명령어

IE10 이상에서는 Document.execCommand() 메서드를 통해 'cut' 및 'copy' 명령어에 대한 지원을 추가했습니다. 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에서 텍스트 영역과 버튼 사용:

<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');
    }
});

queryCommandSupportedqueryCommandEnabled

document.execCommand()를 호출하기 전에 document.queryCommandSupported() 메서드를 사용하여 이 API를 지원하는지 확인해야 합니다. 위의 예에서는 다음과 같이 지원 여부에 따라 버튼 사용 중지 상태를 설정할 수 있습니다.

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

document.queryCommandSupported()document.queryCommandEnabled()의 차이점은 브라우저에서 잘라내기 및 복사를 지원할 수 있지만 현재 선택된 텍스트가 없으면 사용 설정되지 않는다는 것입니다. 이는 텍스트 선택을 프로그래매틱 방식으로 설정하지 않고 명령어가 예상대로 실행되도록 하거나 사용자에게 메시지를 표시하려는 경우에 유용합니다.

브라우저 지원

IE 10 이상, Chrome 43 이상, Firefox 41 이상, Opera 29 이상에서는 이러한 명령어를 지원합니다.

Safari는 이러한 명령을 지원하지 않습니다.

알려진 버그