>웹 프론트엔드 >JS 튜토리얼 >Flash_javascript 팁이 없는 Clipboard.js JavaScript 복사-붙여넣기 라이브러리

Flash_javascript 팁이 없는 Clipboard.js JavaScript 복사-붙여넣기 라이브러리

WBOY
WBOY원래의
2016-05-16 15:37:331457검색

clipboard.js는 순수 JavaScript(Flash 없음)로 브라우저 콘텐츠를 시스템 클립보드에 복사하는 기능을 구현합니다. 브라우저 및 Node 환경에서 사용할 수 있습니다. Chrome 42, Firefox 41, IE 9, Opera 29 지원

공식 홈페이지: https://github.com/zenorocha/clipboard.js

소프트웨어 다운로드: http://www.jb51.net/jiaoben/385604.html

공식 사용법: https://zenorocha.github.io/clipboard.js/#example-text

샘플 코드:

공식 예시 1:
온라인 데모: http://demo.jb51.net/js/2015/clipboard/

<script src="clipboard.min.js"></script>
 <textarea id="bar" cols="62" rows="5" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
  Cut to clipboard
</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
alert("复制成功");
  e.clearSelection();
});

clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});
</script>

공식 사례 2:

<script src="dist/clipboard.min.js"></script>
<button class="btn">
<script type="text/javascript">
var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function(e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});
</script>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.