자 바스 크 립 트 가 클립보드 에 내용 을 복사 하 는 두 가지 일반적인 방법

흔 한 방법
만능 구 글 을 찾 아 보 니,현재 흔히 볼 수 있 는 방법 은 다음 과 같다.
제3자 라 이브 러 리:clipboard.js
원생 방법:document.execCommand()
이 두 가지 방법 을 각각 어떻게 사용 하 는 지 보 자.
clipboard.js
클립 보드 홈 페이지 입 니 다.https://clipboardjs.com/이렇게 간단 해 보 입 니 다.
인용 하 다.
직접 참조:

가방:npm install clipboard --save ,그리고 import Clipboard from 'clipboard';
쓰다
입력 상자 에서 복사
현재 페이지 에태그 가 있 습 니 다.우 리 는 그 내용 을 복사 해 야 합 니 다.우 리 는 이렇게 할 수 있 습 니 다.

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">    </button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
<button>탭 에data-clipboard-target 속성 을 추가 하 였 습 니 다.그 값 은 복사 해 야 하 는 <input>id입 니 다.말 그대로 전체 탭 에서 내용 을 복사 하 는 것 입 니 다.
직접 복사
때때로,우 리 는에서 내용 을 복사 하 는 것 을 원 하지 않 고,단지 변수 에서 값 을 직접 추출 하 는 것 일 뿐이다.Vue 에서 우리 가 이렇게 할 수 있다 면:

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';
이벤트
때때로 우 리 는 복사 한 후에 몇 가지 일 을 해 야 하 는데,이때 리 셋 함수 의 지원 이 필요 하 다.
처리 함수 에 다음 코드 를 추가 합 니 다:

//             
clipboard.on('success', function(e) {
 console.info('Action:', e.action); //     ,  :Action: copy
 console.info('Text:', e.text); //   ,  :Text:hello word
 console.info('Trigger:', e.trigger); //     :  :<button class="btn" :data-clipboard-text="copyValue">    </button>
 e.clearSelection(); //       
});

//             
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});
작은 매듭
문서 에 서 는 단일 페이지 에서 사용clipboard하면 라 이 프 사이클 관 리 를 더욱 우아 하 게 하기 위해 사용 한 후에 기억btn.destroy() 을 소각 하 라 고 언급 했다.
클립 보드 는 사용 하기 쉽 지 않 습 니까?그러나 하나의 copy 기능 을 위해 추가 제3자 라 이브 러 리 를 사용 하 는 것 은 우아 하지 않 습 니까?이 럴 때 어떻게 해 야 합 니까?그럼 네 이 티 브 로 이 루 지.
document.execCommand()방법
먼저 이 방법 이MDN에서 어떻게 정의 되 는 지 살 펴 보 자.
which allows one to run commands to manipulate the contents of the editable region.
편집 가능 한 영역의 내용 을 실행 명령 으로 조작 할 수 있 습 니 다.주의 하 세 요.편집 가능 한 영역 입 니 다.
정의.
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
방법 은 작업 이 성 공 했 는 지 여 부 를 나타 내 는 Boolean 값 을 되 돌려 줍 니 다.
  • aCommandName:명령 이름 을 표시 합 니 다.예 를 들 어 copy,cut 등(더 많은 명령 은 명령 참조).
  • aShowDefaultUI:사용자 인 터 페 이 스 를 보 여줄 지,일반적인 상황 에 서 는 false 입 니 다.
  • aValueArgument:일부 명령 은 추가 적 인 인자 가 필요 합 니 다.일반적으로 사용 할 수 없습니다.
  • 호환성
    이 방법 은 이전의 호환성 은 사실 그다지 좋 지 않 았 지만,다행히 지금 은 모든 주류 브 라 우 저 를 기본적으로 호 환 하여 모 바 일 에서 도 사용 할 수 있다.

    쓰다
    입력 상자 에서 복사
    현재 페이지 에태그 가 있 습 니 다.그 내용 을 복사 하려 면 이렇게 할 수 있 습 니 다.
    
    <input id="demoInput" value="hello world">
    <button id="btn">    </button>
    js 코드
    
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', () => {
    	const input = document.querySelector('#demoInput');
    	input.select();
    	if (document.execCommand('copy')) {
    		document.execCommand('copy');
    		console.log('    ');
    	}
    })
    다른 곳 복사
    페이지 에<input>태그 가 없 을 때 가 있 습 니 다.우 리 는 하나의<div>에서 내용 을 복사 하거나 변 수 를 직접 복사 해 야 할 수도 있 습 니 다.execCommand() 방법의 정의 에서 언급 한 바 와 같이 편집 가능 한 영역 만 조작 할 수 있다.즉,,

    좋은 웹페이지 즐겨찾기