자바 스크립트는 클립 보드에 복사

일반적인 방법

나는 전능 구글, 이제 일반적인 방법은 주로 두 가지를 다음을 확인 :

타사 라이브러리 : clipboard.js
기본 방법 : document.execCommand을 ()

각각이 두 가지 방법을 사용하는 방법을 살펴 보자.

clipboard.js

이 클립 보드 공식 웹 사이트입니다 https://clipboardjs.com/ 모습이 너무 간단하다.

인용문

직접 인용 :

<스크립트 SRC = "DIST / clipboard.min.js"> </ script>

패키지 참조 :

NPM 클립 보드를 설치 - 저장 
에서 수입 클립 보드 '클립 보드';

사용

<입력 ID = "demoInput"값 = "안녕하세요 세계"> 
<데이터 - 클립 타겟 "BTN"버튼 클래스 = "# demoInput">点我复制</ 버튼> 

수입 클립 보드 '클립'에서 ; 
const를 btnCopy는 = 새로운 클립 보드 ( 'BTN을' );
이 .copyValue = '안녕하세요 세계';

개요

이 문서는 또한 하나의 페이지에서 사용하는 경우 언급 clipboard 더 우아한 메이크업 라이프 사이클 관리를 위해, 사용 후 기억 btn.destroy() 을 파괴 할 수 있습니다.

클립 보드는 사용이 매우 간단하지 않다. 그러나 충분한 우아함, 이번에는 어떻게 할되지 않은 추가 타사 라이브러리에 복사 기능을 사용하는 방법? 그런 다음 네이티브 메소드 구현 노래를 사용합니다.

document.execCommand () 메소드

이 방법에서 봐 MDN 에 어떻게 정의입니다 :

이는 편집 가능 영역의 내용을 조작 할 수있는 실행 명령에 하나를 할 수 있습니다.

이 편집 가능한 영역의 내용을 조작하기 위해 조작 될 수 있다는 것을 의미주의를 편집 영역이다.

정의

불리언 = document.execCommand (aCommandName, aShowDefaultUI, aValueArgument)

방법은 작업의 성공 여부를 나타내는 부울 값을 반환합니다.

aCommandName는 : 같은 명령 이름을 나타냅니다 등 복사, 잘라 내기, (명령을 명령 더 참조)
aShowDefaultUI : 사용자 인터페이스를 표시할지 여부를, 정상적인 상황이 거짓에서;
aValueArgument : 일부 명령은 보통 이하의 추가 매개 변수를 필요로;

적합성

사실,이 방법은하지 전에 아주 좋은 호환성,하지만 좋은 소식은 이제 모든 주요 브라우저와 기본적으로 호환되며, 또한 모바일 단말기에서 사용할 수 있습니다.

용도

입력 상자에서 복사
지금 <입력> 태그를 가지고, 우리는 페이지의 내용을 복사하려면, 우리는이 작업을 수행 할 수 있습니다 :

<입력 ID = "demoInput"값 = "안녕하세요 세계"> 
< "BTN"버튼 식>点我复制</ 버튼> 
CONST BTN = document.querySelector ( '#의 BTN' ); 
btn.addEventListener는 ( ) ( '클릭'=> { 
    CONST 입력 = document.querySelector ( '# demoInput' ) 
    input.select () 경우 (document.execCommand ( '복사' )) { 
        document.execCommand ( '사본 ' ) 
        CONSOLE.LOG ( '复制成功' ); 
    } 
})

다른 로컬 복사본

때때로 페이지가 아닌 <input> 라벨, 우리는에서해야 할 수도 있습니다 <div> 복사 내용 또는 직접 변수를 복사합니다.

기억 execCommand() , 그것은 단지 편집 가능한 영역을 조작 할 수 있습니다, 한 방법이 정의

즉, 즉, <input> 이와 같이 <텍스트 영역> 입력 필드 대신 사용할 수있다이 방법 이외에있다.

이 시간 우리는 Quxianjiuguo이 필요합니다.

< "BTN"버튼 식>点我复制</ 버튼> 
CONST BTN document.querySelector = ( '#의 BTN' ); 

btn.addEventListener은 ( =>) ( '클릭' { 
    CONST 입력 = document.createElement ( "입력" ) 
    document.body.appendChild (입력) 
    input.setAttribute ( '값', '听说你想复制我" ) 
    input.select () 
    경우 (document.execCommand ( '복사' )) { 
        document.execCommand ( '복사' ) 
        CONSOLE.LOG ( '复制成功' ); 
    } 
 document.body.removeChild (입력) 
} )

Quxianjiuguo 그것의 성공을 고려했다. 이 방법을 사용하는 경우, 우리는 몇 구덩이가 발생했습니다.

가 발생 구덩이

크롬은, 시간에이 방법을 실행할 수있는 완벽한 디버깅 시간을. 그런 다음 디버거의 끝으로 이동하고, 구덩이가 나왔다.

네, 네, 당신은 IOS입니다. . .

1, 화면 하단 흑백 지터 복사를 클릭 것, 자세히 살펴 즉시 키보드를 끌어와 떨어져

지터는 더 나은 해결 생산 알고 예정이다. 이 키보드를 당기고 있기 때문에,이 입력 필드에 초점을 맞추고, 그것은 단지, 입력 필드가 잘 입력 할 수 없습니다 만들 것

( '읽기 전용', '읽기 전용') input.setAttribute 코드를 추가하며 <입력> 확인 읽기 전용, 그것은 키보드를 끌어하지 않습니다.

2 복사 할 수 없습니다

이 문제로 인해 input.select ()가 우리 콘텐츠를 선택하는 다른 방법을 사용해야 IOS에 전체 내용을 선택하지 않는 것입니다

이 방법은 input.setSelectionRange (0 input.value.length)이다.

다음과 같이 전체 코드는 다음과 같습니다

CONST BTN document.querySelector = ( '#의 BTN' ); 
btn.addEventListener은 ( =>) ( '클릭' { 
    CONST 입력 = document.createElement ( "입력" ) 
 input.setAttribute ( "읽기 전용", "읽기 전용" ) 
 input.setAttribute ( '값', '헬로우 세계 ) 
 document.body.appendChild (입력) 
    (input.setSelectionRange 0, 9999 )
     의 경우 (document.execCommand ( '복사' )) { 
        document.execCommand ( '복사' ) 
        CONSOLE.LOG ( '复制成功' ) ; 
    } 
 document.body.removeChild (입력);

개요

위의 자바 스크립트 클립 보드에 내용을 복사 몇 가지 링크를 첨부 달성하는 방법입니다 :

execCommand가 MDN

execCommand가 호환성

원본 : https://www.jb51.net/article/135605.htm