當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS实现各种复制到剪贴板

發布時間：2024/9/20 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS实现各种复制到剪贴板小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、實現點擊按鈕，復制文本框中的的內容

二、復制專題地址和 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>

五、復制文本框或者隱藏域中的內容

六、復制 span 標記中的內容

七、瀏覽器兼容? 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实现各种复制到剪贴板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

js
剪贴板

上一篇： gitblit无法安装windows服务
下一篇：红烧鲍鱼的家常做法？