當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现各种复制到剪贴板
生活随笔
收集整理的這篇文章主要介紹了
JS实现各种复制到剪贴板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、實現點擊按鈕，復制文本框中的的內容
| <script?type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 選擇對象 document.execCommand("Copy"); // 執行瀏覽器復制命令 alert("已復制好，可貼粘。"); } </script> <textarea?cols="20"?rows="10"?id="biao1">用戶定義的代碼區域</textarea> <input?type="button"?onClick="copyUrl2()"?value="點擊復制代碼"?/> |
二、復制專題地址和 url 地址，傳給 QQ/MSN 上的好友
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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> |
三、直接復制 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> |
四、點擊文本框時，復制文本框里面的內容
| <input?onclick="oCopy(this)"?value="你好.要copy的內容!"> <script?language="javascript"> function oCopy(obj){ obj.select(); js=obj.createTextRange(); js.execCommand("Copy") alert("復制成功!"); } </script> |
五、復制文本框或者隱藏域中的內容
| <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> |
六、復制 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> |
七、瀏覽器兼容? 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("復制成功！"); ??????} ????} |
八、兼容各大瀏覽器的復制代碼(結合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 |
總結
以上是生活随笔為你收集整理的JS实现各种复制到剪贴板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gitblit无法安装windows服务
- 下一篇： 红烧鲍鱼的家常做法？