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

흔 한 방법
만능 구 글 을 찾 아 보 니,현재 흔히 볼 수 있 는 방법 은 다음 과 같다.
제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() 방법의 정의 에서 언급 한 바 와 같이 편집 가능 한 영역 만 조작 할 수 있다.즉,,와 같은 입력 영역 을 제외하고는 이 방법 을 사용 할 수 없다 는 것 을 의미한다.<br>이 럴 때 우 리 는 곡선 구국 이 필요 하 다.<br><button id="btn">점 복사</button><br>js 코드<pre><code> const btn = document.querySelector('#btn'); btn.addEventListener('click',() => { const input = document.createElement('input'); document.body.appendChild(input); input.setAttribute('value', '听说你想复制我'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); } document.body.removeChild(input); })</code></pre>곡선 구국 에 성공 한 셈 이지.이 방법 을 사용 할 때 몇 개의 구 덩이 를 만 났 다.<br>부 딪 힌 구덩이<br>크롬 에서 디 버 깅 을 할 때 이 방법 은 완벽 하 게 작 동 된다.그리고 이동 단 디 버 깅 을 할 때 구덩이 가 나 왔 다.<br>그래,그래,바로 너,ios...<br>1.복 사 를 클릭 하면 화면 아래 에 하 얀 화면 디 더 링 이 나타 나 고 자세히 보면 키 보드 를 당기 고 순간적으로 접 습 니 다.<br>떨 림 이 무엇 때 문인 지 알 면 해결 하기 쉬 울 겁 니 다.키 보드 를 당 기 는 이상 입력 영역 에 초점 을 맞 추 는 것 입 니 다.입력 영역 을 입력 할 수 없 게 하면 됩 니 다.코드 에 input.setAttribute('readonly','readonly')를 추가 합 니 다.이<input>을 읽 기만 하면 키 보드 를 당기 지 않 을 것 이다.<br>2、복사 불가<br>이 문 제 는 input.select()가 ios 에서 모든 내용 을 선택 하지 않 았 기 때문에 다른 방법 으로 내용 을 선택해 야 합 니 다.이 방법 은 input.set Selection Range(0,input.value.length)입 니 다.<br>전체 코드 는 다음 과 같 습 니 다:<pre><code> const btn = document.querySelector('#btn'); btn.addEventListener('click',() => { const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', 'hello world'); document.body.appendChild(input); input.setSelectionRange(0, 9999); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); } document.body.removeChild(input); })</code></pre>총결산<br>자 바스 크 립 트 가 클립보드 에 복사 내용 을 어떻게 실현 하 는 지 에 대한 링크 를 몇 개 첨부 합 니 다.<br><a rel="noreferrer noopener nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand MDN</a> <br><a rel="noreferrer noopener nofollow" href="https://caniuse.com/#search=execCommand">execCommand兼容性</a> <br><a rel="noreferrer noopener nofollow" href="https://github.com/zenorocha/clipboard.js">clipboard.js</a>