Clipboard.js의 기본 사용법 공유

clipboard.js는 플래시 없이 텍스트를 클립보드에 복사하는 플러그인입니다. 이번 글은 주로 Clipboard.js의 기본적인 사용법을 소개하는 글입니다.

1 플러그인 소개

<script src="js/clipboard.min.js"></script>

2 기본 사용법

먼저 DOM 선택기, HTML 요소 또는 HTML 요소 목록을 전달하여 인스턴스화해야 합니다.

new Clipboard('.btn');

1 한 요소를 다른 요소의 텍스트를 복사하는 트리거로 사용하려면 data-clipboard-target 속성 뒤에 속성 선택기가 와야 합니다.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
</button>

또 다른 속성 data-clipboard-action 속성도 있습니다 지정하려면 복사 또는 잘라내기 작업이 필요합니다. 기본값은 복사입니다. 자르기 작업은 또는 요소에서만 작동합니다.

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

2 트리거로 다른 요소가 필요하지 않습니다. data-clipboard-text 속성을 사용하고 그 뒤에 복사해야 하는 텍스트를 넣을 수 있습니다.

1 실행하여 클립보드를 확인합니다. .js가 Clipboard.isSupported()를 지원하는지 여부, true를 반환하면 사용할 수 있습니다.

2 사용자 피드백을 표시하거나 복사/잘라내기 작업 후 선택 항목을 캡처합니다. 작업, 텍스트, 트리거 요소

<button class="btn" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">
    Copy to clipboard
</button>

3 이 플러그인은 이벤트 위임을 사용하여 트리거하므로 DOM에 대한 작업을 크게 줄입니다.

4 고급 사용법

HTML을 수정하고 싶지 않다면 매우 편리한 명령 API를 사용할 수 있습니다. 당신이 해야 할 일은 함수를 선언하고, 원하는 작업을 작성하고, 값을 반환하는 것뿐입니다. 아래는 서로 다른 ID를 가진 트리거에 대해 서로 다른 값을 반환하는 예입니다. 구체적인 사용 방법은 https://clipboardjs.com

var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

을 참조하세요. 관련 권장 사항:

clipboard.js는 html 페이지를 사용하여 정보를 클립보드에 복사합니다.

ZeroClipboard.js는 하나의 플래시를 사용하여 여러 텍스트 상자를 복사합니다.

Clipboard.js Flash_javascript 팁이 없는 JavaScript 복사-붙여넣기 라이브러리

위 내용은 Clipboard.js의 기본 사용법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!