자 바스 크 립 트 가 클립보드 에 내용 을 복사 하 는 두 가지 일반적인 방법
6693 단어 JavaScript내용 복사클립보드
만능 구 글 을 찾 아 보 니,현재 흔히 볼 수 있 는 방법 은 다음 과 같다.
제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 값 을 되 돌려 줍 니 다.
이 방법 은 이전의 호환성 은 사실 그다지 좋 지 않 았 지만,다행히 지금 은 모든 주류 브 라 우 저 를 기본적으로 호 환 하여 모 바 일 에서 도 사용 할 수 있다.
쓰다
입력 상자 에서 복사
현재 페이지 에태그 가 있 습 니 다.그 내용 을 복사 하려 면 이렇게 할 수 있 습 니 다.
<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()
방법의 정의 에서 언급 한 바 와 같이 편집 가능 한 영역 만 조작 할 수 있다.즉,,
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.