Javascript 原生有一些事件: copy,paste,cut,
这些事件可以作用的目标元素:
能获得焦点的元素 (如 contentEditable 内容能编辑或者可以选中的元素), 或者是 < body>
- <div id="cardList">
- <div class="btn"> 点击我, 复制我 </div>
- </div>
- <script type="text/javascript">
- function copy(str){
- var save = function (e){
- e.clipboardData.setData('text/plain',str);// 下面会说到 clipboardData 对象
- e.preventDefault();// 阻止默认行为
- }
- document.addEventListener('copy',save);
- document.execCommand("copy");// 使文档处于可编辑状态, 否则无效
- }
- document.getElementById('cardList').addEventListener('click',function(ev){
- copy(ev.target.innerText)
- })
- </script>
使用 jQuery 中的方法监听用户的剪切, 复制, 粘贴的行为:
- $("#cut").on("cut",function(){
- alert("剪切");
- });
- $("#copy").on("copy",function(){
- alert("复制");
- });
- $("#paste").on("paste",function(){
- alert("粘贴");
- });
这些行为包括使用键盘的 ctrl + c 操作, 或者右击鼠标 -> 复制等操作.
Evevt.clipboardData 对象
clipboardData 是 JavaScript 剪切板对象, 该对象提供了 3 个常用方法:
clearData(): clipboardData 对象从剪切板删除一种或多种数据格式 (一个参数: 数据类型)
getData(): clipboardData 对象从剪切板获取指定格式的数据 (一个参数: 数据类型)
setData(): clipboardData 对象赋予指定格式的数据 (两个参数: 数据类型, 要赋予的值)
* 数据类型一般为 ""text/plain" "
Evevt.clipboardData 对象兼容性问题
经过尝试, clipboardData 对象内兼容大部分 px 浏览器, 像 chrome,firefox,ie 等, 但是在手机端兼容性不是很好,
目前 clipboardData 在 ios 上的 safari 浏览器无效, 为解决移动端这个问题, 我们引用一个 js 插件 -- https://github.com/zenorocha/clipboard.js
clipboard.js 依赖于 html5 推出的 Selection API 和 execCommand API
使用方法:
首先在页面中引入
<script src="clipboard.min.js"></script>
使用 clipboard.js 的自定义属性
- <!-- 使用 data-clipboard-target 属性指定被复制的标签 -->
- <!-- 使用 data-clipboard-action 属性指定一些操作, copy(复制),cut(剪切)-->
- <!-- 注意: cut 操作仅适用于 < textarea > 和 < input>-->
- <div style="margin:2em">
- <textarea id="id_text"></textarea>
- <button type="button" id="id_copy"
- data-clipboard-target="#id_text"
data-clipboard-action="copy"> 点击复制
- </button>
- </div>
- <script type="text/javascript">
- var clipboard = new Clipboard("#id_copy");
- clipboard.on("success",function (element) {// 复制成功的回调
- console.info("复制成功, 复制内容:" + element.text);
- });
- clipboard.on("error",function (element) {// 复制失败的回调
- console.info(element);
- });
- </script>
高级用法:
- // 清理 Clipboard 对象
- var clipboard = new Clipboard('.btn');
- clipboard.destroy();
JS 实现各种复制到剪贴板:
1, 实现点击按钮, 复制文本框中的的内容
- <script type="text/javascript">
- function copyyel2()
- {
- var yel2=document.getElementById("biao1");
- yel2.select(); // 选择对象
- document.execCommand("Copy"); // 执行浏览器复制命令
- alert("已复制好, 可贴粘.");
- }
- </script>
- <textarea cols="20" rows="10" id="biao1"> 用户定义的代码区域 </textarea>
- <input type="button" onClick="copyyel2()" value="点击复制代码" />
2, 复制专题地址和 url 地址, 传给 QQ/MSN 上的好友
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>Js 复制代码 </title>
- </head>
- <body>
- <p>
- <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和 url 地址, 传给 QQ/MSN 上的好友">
- <script language="javascript">
- function copyToClipBoard(){
- var clipBoardContent="";
- clipBoardContent+=document.title;
- clipBoardContent+="";
- clipBoardContent+=this.location.href;
- window.clipboardData.setData("Text",clipBoardContent);
- alert("复制成功, 请粘贴到你的 QQ/MSN 上推荐给你的好友");
- }
- </script>
3, 直接复制 url
- <input type="button" name="anniu2" onClick='copyUrl()' value="复制 URL 地址">
- <script language="javascript">
- function copyUrl()
- {
- var clipBoardContent=this.location.href;
- window.clipboardData.setData("Text",clipBoardContent);
- alert("复制成功!");
- }
- </script>
4, 点击文本框时, 复制文本框里面的内容
- <input onclick="oCopy(this)" value="你好. 要 copy 的内容!">
- <script language="javascript">
- function oCopy(obj){
- obj.select();
- js=obj.createTextRange();
- js.execCommand("Copy")
- alert("复制成功!");
- }
- </script>
5, 复制文本框或者隐藏域中的内容
- <script language="javascript">
- function CopyUrl(target){
- target.value=myimg.value;
- target.select();
- js=myimg.createTextRange();
- js.execCommand("Copy");
- alert("复制成功!");
- }
- function AddImg(target){
- target.value="[IMG]"+myimg.value+"[/ img]";
- target.select();
- js=target.createTextRange();
- js.execCommand("Copy");
- alert("复制成功!");
- }
- </script>
6. 复制 span 标记中的内容
- <script type="text/javascript">
- </script>
- <br />
- <br />
- <script type="text/javascript">function copyText(obj)
- {
- var rng = document.body.createTextRange();
- rng.moveToElementText(obj);
- rng.scrollIntoView();
- rng.select();
- rng.execCommand("Copy");
- rng.collapse(false);
- alert("复制成功!");
- }
- </script>
7. 浏览器兼容 copyToClipboard("拷贝内容")
- function copyToClipboard(txt) {
- if (window.clipboardData) {
- window.clipboardData.clearData();
- clipboardData.setData("Text", txt);
- alert("复制成功!");
- } else if (navigator.userAgent.indexOf("Opera") != -1) {
- window.location = txt;
- } else if (window.netscape) {
- try {
- netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
- } catch (e) {
- alert("被浏览器拒绝!\n 请在浏览器地址栏输入'about:config'并回车 \ n 然后将'signed.applets.codebase_principal_support'设置为'true'");
- }
- var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
- if (!clip)
- return;
- var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
- if (!trans)
- return;
- trans.addDataFlavor("text/unicode");
- var str = new Object();
- var len = new Object();
- var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
- var copytext = txt;
- str.data = copytext;
- trans.setTransferData("text/unicode", str, copytext.length * 2);
- var clipid = Components.interfaces.nsIClipboard;
- if (!clip)
- return false;
- clip.setData(trans, null, clipid.kGlobalClipboard);
- alert("复制成功!");
- }
- }
8. 兼容各大浏览器的复制代码 (结合 ZeroClipboard.js)
- <html>
- <head>
- <title>Zero Clipboard Test</title>
- <script type="text/javascript" src="ZeroClipboard.js"></script>
- <script language="JavaScript">
- var clip = null;
- function $(id) { return document.getElementById(id); }
- function init() {
- clip = new ZeroClipboard.Client();
- clip.setHandCursor(true);
- clip.addEventListener('mouseOver', function (client) {
- // update the text on mouse over
- clip.setText( $('fe_text').value );
- });
- clip.addEventListener('complete', function (client, text) {
- //debugstr("Copied text to clipboard:" + text );
- alert("该地址已经复制, 你可以使用 Ctrl+V 粘贴.");
- });
- clip.glue('clip_button', 'clip_container' );
- }
- </script>
- </head>
- <body onLoad="init()">
- <input id="fe_text" cols=50 rows=5 value = 复制内容文本 1>
- <span id="clip_container"><span id="clip_button"><b > 复制 </b></span></span>
- </body>
- </html
来源: http://www.bubuko.com/infodetail-2603761.html