js는 클릭하여 현재 텍스트를 클립보드에 복사하는 기능을 실현합니다(모든 브라우저와 호환 가능)

js는 클릭하여 현재 텍스트를 클립보드에 복사하는 기능을 실현합니다(모든 브라우저와 호환 가능)_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:24:13

원래의

1666명이 탐색했습니다.

최근 프로젝트를 진행하면서 웹사이트 프레임워크 구축 과정에서 텍스트를 클립보드에 복사해야 하는 기능이 있었는데, 이 기능은 흔히 사용하는 기능이라고 생각하는데, 그렇지 않은 저에게는 큰 도전이었습니다. JS 코드를 자주 작성하지 않았습니다. 이전에 제가 만든 웹사이트는 클립보드 복사 기능을 구현하기 위해 window.clipboardData 를 사용했는데, 당시에는 IE 및 FF 브라우저만 지원했는데 Baidu에서 여러 솔루션을 찾아보았지만, 참을 수 없어서 나중에 코드에서 판단했습니다. 이 속성이 지원되지 않으면 직접 경고: 이 기능은 이 브라우저를 지원하지 않으므로 텍스트 상자의 내용을 수동으로 복사하십시오. 같은 상황에 처한 사람이 있습니까?

alert("此功能不支持该浏览器,请手工复制文本框中内容");

로그인 후 복사

오늘은 클립보드에 복사 기능을 활용하는 방법을 알려드리겠습니다. 기능이 제한되어 있으니 틀린 부분이 있으면 조언 부탁드립니다~

WordPress를 사용해 사이트를 구축해본 학생들은 jQuery를 사용한다는 사실을 많이 알고 있을 거라 믿습니다. jQuery는 다들 익숙하고 사용법도 매우 간단합니다. 아쉽게도 jQuery 자체에는 클립보드에 복사하는 기능이 구현되어 있지 않습니다. 아마도 API가 이 기능이 있을 것입니다. 이번에 구축한 사이트는 워드프레스를 사용하는데, 클립보드에 복사하기 위해 jQuery의 API를 한참 검색하다가 jQuery ZeroClipboard가 있어서 간단하게 구현해봤습니다. WordPress의 클립보드 기능에 복사. 그러나 jQuery ZeroClipboard에는 Zero Clipboard라는 이름의 아버지가 있는 것으로 밝혀졌습니다.

Zero Clipboard는 복사를 위해 Flash를 사용하는 독립 js 라이브러리이며 ZeroClipboard.js와 ZeroClipboard.swf라는 두 개의 파일이 필요합니다. 인터넷에는 2가지 버전이 있는데, 구현 원리는 플래시를 사용하여 복사하는 것입니다. 원작자가 누구인지는 알 수 없습니다. 우리는 저작권을 존중하고 명확한 양심을 가지고 있습니다. 오늘 여러분에게 소개된 버전은 비교적 간단합니다.

먼저 Zero Clipboard를 사용한 후 생성된 플래시 개체인 아래 그림을 보세요. 이는 flash10 이하 버전과 호환되며 모든 브라우저와 호환됩니다.

제로 클립보드 공식 주소: http://zeroclipboard.org/,

이를 사용하려면 서버 환경을 구축해야 합니다. 일부 학생들은 XP나 win7 시스템과 함께 제공되는 서버 환경을 구축하는 방법이 다양합니다. xampp, appserv, APMServ 등으로 설치하면 됩니다. 설정이 매우 간단하므로 여기서는 소개하지 않겠습니다.

이제 독립된 js 라이브러리 Zero Clipboard를 사용하여 간단히 클립보드로 복사 기능을 구현합니다.

<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!-- 
 说明：
 1.data-clipboard-target 输入要复制的对象的ID
-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
// 定义一个新的复制对象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
 moviePath: "ZeroClipboard.swf"
} );

// 复制内容到剪贴板成功后的操作
clip.on( 'complete', function(client, args) {
 alert("复制成功，复制内容为："+ args.text);
} );

</script>

로그인 후 복사

데모 다운로드 (주의사항: 코드를 다운로드하는 학생들은 데모를 탐색할 때 서버 환경을 사용해야 한다는 점을 기억하세요. 그렇지 않으면 효과를 볼 수 없습니다~)

다음 소개jQuery ZeroClipboard

jQuery ZeroClipboard는 zClip이라고도 불리는 ZeroClipboard를 기반으로 한 개선된 버전입니다. jQuery ZeroClipboard는 jQuery의 API로서 작동하기도 매우 쉽습니다.

사용하기 전에 2개의 js 파일을 인용해야 합니다: jquery.js 및 jquery.zclip.js

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.js"></script>

로그인 후 복사

이제 jquery.zclip.js를 사용하여 다음과 같이 클립보드로 복사 기능 데모를 간단하게 구현합니다.

<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line{margin-bottom:20px;}
/* 复制提示 */
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<div class="line">
 <h2>demo1 点击复制当前文本</h2>
 <a href="#none" class="copy">点击复制我</a>
</div>
<div class="line">
 <h2>demo2 点击复制表单中的文本</h2>
 <a href="#none" class="copy-input">点击复制单中的文本</a>
 <input type="text" class="input" value="输入要复制的内容" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* 定义所有class为copy标签，点击后可复制被点击对象的文本 */
 $(".copy").zclip({
  path: "ZeroClipboard.swf",
  copy: function(){
  return $(this).text();
  },
  beforeCopy:function(){/* 按住鼠标时的操作 */
   $(this).css("color","orange");
  },
  afterCopy:function(){/* 复制成功后的操作 */
   var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>&#9786; 复制成功</div></div>");
   $("body").find(".copy-tips").remove().end().append($copysuc);
   $(".copy-tips").fadeOut(3000);
  }
 });
/* 定义所有class为copy-input标签，点击后可复制class为input的文本 */
 $(".copy-input").zclip({
  path: "ZeroClipboard.swf",
  copy: function(){
  return $(this).parent().find(".input").val();
  },
  afterCopy:function(){/* 复制成功后的操作 */
   var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>&#9786; 复制成功</div></div>");
   $("body").find(".copy-tips").remove().end().append($copysuc);
   $(".copy-tips").fadeOut(3000);
  }
 });
});
</script>

로그인 후 복사

데모 다운로드 (주의 사항: 코드를 다운로드하는 학생들은 데모를 탐색할 때 서버 환경을 사용해야 한다는 점을 기억하세요. 그렇지 않으면 효과를 볼 수 없습니다~)

위 코드는 jQuery의 기능을 결합하여 노드를 조작하고, 복사 전후의 조작, 노드의 동적 삽입 등 jquery.zclip.js의 역할을 최대한 발휘하며, jquery.zclip.js를 사용하면 매우 간단합니다.

위의 독립적인 js 라이브러리 중에서 ZeroClipboard.js와 jquery.zclip.js는 모두 플래시를 사용하여 클립보드에 복사하는 기능을 구현합니다. ZeroClipboard.js를 사용하면 상대적으로 적은 기능을 제공하지만 독립적이라는 것을 알 수 있습니다. 라이브러리의 파일 크기는 상대적으로 작고 jquery.zclip.js를 사용한 후의 기능은 상대적으로 풍부합니다. 그러나 jQuery 프레임워크를 사용하지 않는 사이트의 경우 jquery.zclip.js를 사용하는 것은 대역폭 낭비입니다.

어떤 복사 방법을 사용해야 하는지, 아니면 특정 위치 지정 상황이 좋은지 이 글이 자바스크립트 프로그래밍을 배우는 모든 분들에게 도움이 되기를 바랍니다.