simple-copy.js 복사 텍스트와 DOM을 위한 작은 라이브러리

훌륭한 클립보드 libs를 사용해 보았지만 때때로 필요한 대부분의 것이 단순한 것임을 알게 되었습니다. 다른 개발자의 작업을 볼 때 lib를 사용하는 대신 API가 브라우저는 document.execDocument()를 제공합니다(obsolete으로 간주되지만).

내가 깨달은 것은 (적어도 나에게) 큰 문제는 라이브러리가 작고 Gzip 압축을 사용하지만 이 기능이 비활성화된 서버에서는 평균 ~2KB의 무게가 결국 ~10KB가 된다는 것입니다. (나는 별도의 라이브러리를 의미합니다) 압축 및 축소 전략(항상 사용함)과 일부 "lazyload"기능이 있다는 것을 완벽하게 이해하지만 이 과정에서 많은 계획에 의존하지 않고 가벼운 것이 필요했습니다.

처음에는 lib 프로토타입을 공유하는 것에 대해 생각하지 않았다는 것을 인정하지만 충분히 흥미로웠습니다. GZip이 활성화된 서버에서 사용될 때 lib는 ~1,2KB를 얻었고, GZip을 비활성화하면 ~2,5KB를 얻었습니다. , 즉 최소 차이(~1KB)입니다.

I am working so that the lib in the future will use ClipboardAPI while maintaining backward compatibility for older browsers.

구성

CDN(jsdelivr)을 사용하여 페이지에 직접 입력할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/simple-copy.min.js"></script>

소스에서 다운로드 가능: https://github.com/brcontainer/simple-copy.js/blob/0.5.2/simple-copy.min.js

npm을 사용하여 설치할 수도 있습니다.

npm i simple-copy.js

require()와 함께 사용:

const SimpleCopy = require('simple-copy.js');

또는 ECMAScript 모듈과 함께 사용:

import SimpleCopy from 'simple-copy.js'

용법

선택기를 사용하여 요소에서 콘텐츠 복사:

SimpleCopy.copy("<selector>");

선택기를 사용하여 요소에서 텍스트 복사:

SimpleCopy.copy("<selector>", { "text": true });

선택기를 사용하여 전체 요소 복사:

SimpleCopy.copy("<selector>", { "node": true });

선택기를 사용하여 요소에서 콘텐츠 복사:

var element = document.querySelector(".foobar");
SimpleCopy.copy(element);

선택기를 사용하여 요소에서 텍스트 복사:

var element = document.getElementById("idelement");
SimpleCopy.copy(element, { "text": true });

전체 요소 복사:

var element = document.getElementsByClassName("<class>");
SimpleCopy.copy(element[0], { "node": true });

선택기를 사용하여 요소의 텍스트를 선택합니다.

SimpleCopy.select("<selector>");

요소에서 콘텐츠 선택:

var element = document.querySelector(".foobar");
SimpleCopy.select(element);

전체 노드 선택:

var element = document.querySelector(".foobar");
SimpleCopy.select(element, { "node": true });

클립보드에 텍스트 설정:

SimpleCopy.data("Hello, world!");

데이터 속성에 정의된 요소에서 콘텐츠 복사:

<button data-simplecopy-target="<selector>">Copy</button>

데이터 속성에 정의된 전체 요소 복사:

<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>

데이터 속성에 정의된 요소에서 콘텐츠 선택:

<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>

형식 없이 html 콘텐츠 복사:

<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>

데이터 속성으로 클립보드의 텍스트 설정:

<button data-simplecopy-data="Hello, world!">Copy text</button>

브라우저 지원

✔
✔
✔
✔
10+ ✔
9+ ✔