JS는 클립 보드에 내용을 복사

JS에서 오늘 지식으로 당신과 함께 클립 보드의 내용을 공유하는 복사합니다.

하나는 내용을 클립 보드에 복사

최근 활동 페이지가 작은 수요가 사용자가 클릭하거나 길게 누르면 발생 구현 프로세스 및 구덩이에 대해, 클립 보드에 기록 내용을 복사 할 수 있습니다.
일반적인 방법은
지금 일반적인 방법은 주로 다음과 같은 두 가지 모두 구글을 확인
타사 라이브러리 : clipboard.js
기본 방법 : document.execCommand을 ()

이 두 가지 방법 중 각각 봐의 사용이다
clipboard.js
:이 클립 보드 공식 웹 사이트입니다 https://clipboardjs.com/ 외모는 간단 수 있도록하고,

참조
<scriptsrc = "DIST / clipboard.min.js : 직접 참조 ">
'다음 importClipboardfrom'clipboard을 클립 보드 - 저장 설치 NPM과; 패키지

사용은
입력 상자 복사
, 우리는이 작업을 수행 할 수있는 지금, 우리는 페이지의 내용을 복사하기 위해 <input> 태그 필요가있다 :

<input id ="demoInput" value ="hello world"><button class ="btn" data-clipboard-target="#demoInput">点我复制</button>
importClipboard from 'clipboard';const btnCopy = newClipboard('btn');

참고 <버튼> 태그는 그 값이 복사 될 데이터 - 클립 타겟의 속성을 추가하는 것이 <입력> 아이디, 그것은 전체 레이블 복사 콘텐츠임을 시사한다.

직접 복사
때때로, 우리는 <입력>에서 내용을 복사하고 싶지 않은 경우, 값은 변수에서만 직접입니다. 뷰, 우리는이 작업을 수행 할 수 있습니다

<button class="btn":data-clipboard-text ="copyValue">
点我复制
</button>
importClipboard from 'clipboard';
const btnCopy =  newClipboard('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);});

요약
문서는 순서 메이크업 수명주기 관리 더 우아한 단일 페이지에서 클립 보드, btn.destroy 기억한다면 () 사용 후 그것을 파괴 언급했다.
클립 보드는 사용이 매우 간단하지 않다. 그러나 충분한 우아함, 이번에는 어떻게 할되지 않은 추가 타사 라이브러리에 복사 기능을 사용하는 방법? 그런 다음 네이티브 메소드 구현 노래를 사용합니다.
document.execCommand () 메소드

MDN이 정의하는 방법에서이 방법 첫번째보기 :
. RUN 명령은 편집 가능한 지역에서의 내용을 조작 할 수 android.permission하는 한
그 동작 내용 편집 가능한 지역을 허용하는 명령을 실행할 수 있습니다 의미는,주의는 편집 가능한 영역입니다.

정의

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

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

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

사용이
입력 상자에서 복사
지금, 우리는 그 내용을 복사 할 페이지의 레이블 싶어했다, 우리는이 작업을 수행 할 수 있습니다 :

<inputid="demoInput"value="hello world">
<buttonid="btn">点我复制</button>
const
 btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    const input = document.querySelector('#demoInput');
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }

})

다른 로컬 복사본은
때때로 레이블을하지 않는 페이지, 우리는 <div> 또는 직접 복사 변수에서 내용을 복사해야 할 수도 있습니다.
의 execCommand ()에있어서의 정의에서 언급 된 기억, 그 외에 <input>에서 <텍스트 영역> 입력 필드 등의 이상이 방법이 사용될 수없는 영역, 즉 편집 수단을 조작만을 할 수있다.

우리가 Quxianjiuguo을 필요로이 시간

<button id="btn">点我复制</button>
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);
})

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

피트가 발생
이 방법은 완벽하게 실행하면, 시간에 크롬 디버깅. 그런 다음 디버거의 끝으로 이동하고, 구덩이가 나왔다.
네, 네, 당신은 IOS입니다. . .
화면의 하단 흑백 복사 1. 지터 될 것입니다, 자세히 살펴 즉시 키보드를 끌어되어 버리고
더 나은 해결 될 때 발생하는 지터로 인해 무엇인지. 키보드가 인출되어 있기 때문에,이 입력 필드 상에 집중되며, 상기 입력 필드에 입력 만 ( "읽기 전용", "읽기 전용"input.setAttribute 코드를 추가 충분하게 것이 아니다 ) 읽기 전용 인 <input>을 만들 이 키보드를 끌어하지 않습니다.
복제 할 수없는 2.
문제로 인해 input.select ()는 IOS의 전체 내용을 선택하지 않는다, 우리 콘텐츠를 선택하기 위해 다른 방법을 사용해야합니다,이 방법은 input.setSelectionRange (0, input.value.length)이다;

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

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);
})

요약
: 위의 몇 가지 링크 첨부 내용을 클립 보드에 복사 자바 스크립트를 달성하는 방법에 관한 것입니다
의 execCommand MDN이 :
https://developer.mozilla.org/en-US/docs/Web/API/Document/
execCommandexecCommand 호환성 : HTTPS를 : //caniuse.com/#search=execCommand
clipboard.js :
https://github.com/zenorocha/clipboard.js

JS 클립 보드의 내용을 복사 정보, 당신은 얼마입니까? 코멘트는 코멘트 영역에 오신 것을 환영합니다!