집 >웹 프론트엔드 >JS 튜토리얼 >Clipboard.js에서 복사 기능을 구현하는 단계에 대한 자세한 설명

Clipboard.js에서 복사 기능을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-17 13:45:242783검색

이번에는clipboard.js에서 복사 기능을 구현하는 단계에 대해 자세히 설명하겠습니다.clipboard.js에서 복사 기능을 구현하는 데 있어 주의 사항은 무엇입니까?

저는 최근 직장에서 버튼을 사용하여 해당 콘텐츠를 복사해야 하는 일이 필요했습니다. 저는 인터넷에서 많은 솔루션을 찾았고 마침내 구현을 위해 클립보드.js 플러그인을 선택했습니다. 플래시나 다른 프레임워크에 의존하지 않고, 크기가 작고, 사용하기 쉽고, 호환성이 좋기 때문입니다. 아래는 사용법에 대한 간략한 소개입니다.

플러그인을 소개하면 다운로드하거나 타사 CDN을 사용할 수 있습니다.

rreee

HTML의 경우 두 가지 용도가 있습니다.

첫 번째 유형

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

참고: 버튼을 사용하여 다른 요소의 내용을 복사하는 경우 이 방법을 사용할 수 있습니다. 이때, 버튼을 트리거 요소라 하고, 복사된 요소를 타겟 요소라 합니다. 이때 data-clipboard-target의 값은 대상 요소의 선택자이며, 트리거 요소에는 data-clipboard-target의 속성 이 설정됩니다. 새로운 Clipboard()는 인스턴스화된 객체이며 매개변수는 HTML 요소, 요소 선택기일 수 있습니다. 자체 로직을 모니터링하고 구현할 수 있는 두 가지 이벤트인 성공과 오류가 있습니다. 복사가 완료된 후에는 대상 요소가 선택 상태가 되기 때문에 대상 요소의 선택 상태를 취소하려면 e.clearSelection()이 필요합니다.
장점: 복사된 콘텐츠는 대상 요소의 값이 변경되면 복사된 값도 변경될 수 있습니다.

적용 가능한 시나리오: 복사 내용은 가변적이며 고정되지 않습니다.

두번째 유형

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target=&#39;#copyValue&#39;>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

참고: data-clipboard-text 값은 복사하려는 콘텐츠입니다. 타겟 요소는 없고 트리거 요소만 있습니다.

단점: 복사된 내용은 정적이고 변경되지 않으며 미리 설정되어 있습니다.

적용 가능한 시나리오: 복사된 콘텐츠가 수정되었습니다

위의 단점에 대해 복사된 콘텐츠도 동적이 되도록 다음과 같이 최적화할 수 있습니다.

//html部分
<button type="button" data-clipboard-text=&#39;复制内容&#39;>复制</button>
//js部分
new Clipboard('button');

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!