잘라내기 및 복사 명령어

Matt Gaunt

IE10 이상에서는 'cut'에 대한 지원이 추가되었습니다. '복사' 명령어를 통해 Document.execCommand() 메서드를 사용하여 축소하도록 요청합니다. Chrome 버전 43부터 이러한 명령어가 Chrome에서도 지원됩니다.

이러한 명령 중 하나가 실행될 때 브라우저에서 선택된 텍스트는 사용자의 클립보드에 복사됩니다. 이렇게 하면 사용자에게 게시자가 을 눌러 텍스트의 일부를 선택하여 클립보드에 복사합니다.

이는 Selection API와 결합하여 텍스트를 프로그래밍 방식으로 선택하여 클립보드에 복사할 내용을 결정합니다. 이 도움말의 뒷부분에서 더 자세히 살펴보겠습니다.

간단한 예

예를 들어 이메일 주소를 표시됩니다.

클릭하면 복사를 시작하는 버튼과 함께 이메일 주소를 HTML에 추가합니다.

<p>Email me at <a class="js-emaillink" href="mailto:[e-mail]">[e-mail]</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() 프로그래매틱 방식으로 'selection'을 앵커, 이는 우리가 만든 텍스트인 복사하려고 합니다 document.execCommand()를 호출한 후 를 호출하여 선택사항을 삭제할 수 있습니다. window.getSelection().removeAllRanges()로 전달됩니다. 모든 것이 예상대로 작동하는지 확인하려면 document.execCommand();의 응답입니다. 명령어가 선택할 수 있습니다 execCommand()를 try and 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');
    }
});

queryCommandSupported 및 queryCommandEnabled

document.execCommand()를 호출하기 전에 이 API가 다음을 사용하여 지원됩니다. document.queryCommandSupported() 메서드를 사용하여 축소하도록 요청합니다. 위의 예에서는 지원합니다.

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

Kubernetes와 document.queryCommandSupported() 및 document.queryCommandEnabled() 는 잘라내기 및 복사 기능을 브라우저에서 지원할 수 있지만 현재 선택된 텍스트가 없으면 사용 설정할 수 없다는 것입니다. 이는 블루베리 파이를 사용하지 않는 텍스트 선택을 프로그래매틱 방식으로 설정하며 명령어가 정상적으로 실행되지 않으면 사용자에게 메시지를 표시합니다.

브라우저 지원

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

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

알려진 버그

• devtools에서 queryCommandSupported()를 호출하면 항상 false가 반환됩니다.
• 현재 컷은 프로그래매틱 방식으로 텍스트를 선택할 때만 작동합니다.