JS实现各种复制到剪贴板

最新推荐文章于 2024-03-10 10:30:51 发布
最新推荐文章于 2024-03-10 10:30:51 发布
阅读量8.7k 收藏 2
点赞数 3
分类专栏： 浏览器兼容性 前端hack JS学习 前端plas

/*抄自  http://www.cnblogs.com/huijieoo/articles/5569990.html */

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 οnclick="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>

「已注销」
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现各种复制到剪贴板的方法(分享)
11-28
一、实现点击按钮，复制文本框中的的内容 [removed] function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert&...
JavaScript复制内容到剪切板
热门推荐
老杨头的博客
11-14 2万+
复制内容到剪切板分两种情况，一种是从页面已有的可选元素中选中内容进行复制，一种是将Javascript代码中的字符串直接复制到剪切板。
JavaScript：实现复制粘贴剪切功能
lalala_dxf的博客
12-30 2万+
ClipboardAPI是下一代的剪贴板操作方法，比传统的方法更加强大、更合理。
原生js实现复制功能
最新发布
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
03-10 408
在JavaScript中，实现复制功能主要依赖于方法，这个方法可以复制文本到用户的剪贴板。但是请注意，这个方法可能在某些环境下（如某些浏览器或浏览器设置中）不可用。
JavaScript实现内容复制到剪贴板
weixin_42415158的博客
04-28 3515
windows 浏览器 JavaScript实现内容复制到剪贴板
js实现文本复制到剪切板
罗俊的博客
05-24 5089
复制文本到剪切板可使用navigator.clipboard.writeText()方法，如需兼容ie等老版本浏览器可使用execCommand()方法。
javascript复制到剪切板
ihchenchen的博客
04-17 943
【代码】javascript复制到剪切板。
JavaScript实现复制或剪切内容到剪贴板功能的方法
01-19
网上看到的几款插件，ZeroClipboard是通过flash实现的复制功能，随着越来越多的提议废除flash，能不能通过JS来实现复制剪切呢，今天分享一个兼容IE7浏览器复制的插件给大家，支持使用javascript实现复制、剪切和粘贴...
JS实现复制内容到剪贴板功能
10-20
本文主要介绍了JS实现复制内容到剪贴板功能的步骤方法，可兼容所有PC浏览器，不兼容手机端。具有一定的参考价值，下面跟着小编一起来看下吧
node.js实现复制文本到剪切板的功能
10-20
主要给大家介绍了node.js实现复制文本到剪切板的功能，文中介绍的非常详细，并给出示例代码，相信对大家具有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。
JavaScript实现点击复制（JS访问剪贴板相关）
weixin_45092437的博客
04-06 8759
document.execCommand()方法用来操作当前聚焦的可编辑元素（`input`、`textarea`）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。 Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand() 这种剪贴板访问方式的。
JavaScript复制内容到剪贴板
weixin_34277853的博客
02-27 591
原文链接：github.com/axuebin/art… 最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。 常见方法 查了一下万能的Google，现在常见的方法主要是以下两种： 第三方库：clipboard.js 原生方法：document.execCommand() 分别来看看这两种方法是如何使用的。 clipboard.js 这是cli...
js操作剪贴板讲解
曹定栓的博客
08-15 2170
在操作系统级别，剪贴板允许应用程序之间传输数据。 在现代web应用中，提供复制、剪切、粘贴等与剪贴板交互的功能已成为标配，极大的提高了用户的便利性。 但由于涉及到跨域和隐私问题，浏览器对这种交互进行了严格的限制。例如，当前浏览的网站不应能够无授权地访问从另一来源的网站复制的内容。这样可以防止恶意网站读取或修改剪贴板内容，确保用户数据的安全。
JS 复制内容到剪贴板
qq_39025670的博客
02-23 6557
使用 JS 复制内容到剪贴板主要有两种方式： 使用 clipboard.js 插件 使用 document.execCommand() 原生方法 1.使用 clipboard.js 插件 改插件使用比较简单，兼容性较好。具体使用方法见：github clipboard.js 2.使用 document.execCommand() 原生方法 直接见代码： /** * 复制内容 * @param {String} value 需要复制的内容 * @param {String} type 元素类型 in
Js实现剪切板操作（点击复制）
weixin_48312867的博客
11-07 3236
Clipboard.writeText()
如何在 JavaScript 中复制到剪贴板？
kalman2019的博客
12-12 1053
如何将文本复制到剪贴板（多浏览器）？相关：How does Trello access the user's clipboard?
js复制内容到剪贴板，实现：复制 粘贴
睡觉不打呼噜的博客
06-22 981
js复制内容到剪贴板，实现：复制 粘贴 第一种方法，用到 clipboard.js 插件 clipboard.js官网： https://clipboardjs.com/ clipboard 版本是1.5.12，cdn地址如下： ```javascript <script src='https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js'> ``` 情况一：复制某标签的内容 结构： ```html <div
JavaScript将文本复制到剪贴板
张赐荣的技术博客
03-29 1178
【文 / 张赐荣】 下面这段代码是一个 JavaScript 函数，将指定的文本复制到剪贴板中。它使用了 Clipboard API ，同时还考虑了浏览器的兼容性问题。
js实现点击按钮复制链接到剪切板
09-03
你可以使用以下代码片段来实现在JS中点击按钮复制链接到剪贴板的功能： ```html <!DOCTYPE html> <html> <body> <!-- 创建一个输入框用于复制链接 --> <input type="text" value="https://www.example.com" id="myInput"> <!-- 添加一个按钮来触发复制操作 --> <button onclick="myFunction()">复制链接</button> <script> function myFunction() { /* 获取输入框中的链接 */ var copyText = document.getElementById("myInput"); /* 选择链接文本 */ copyText.select(); copyText.setSelectionRange(0, 99999); /* 兼容移动设备 */ /* 复制链接到剪贴板 */ document.execCommand("copy"); /* 提示用户链接已复制 */ alert("链接已复制: " + copyText.value); } </script> </body> </html> ``` 这段代码会创建一个包含链接的输入框和一个按钮。当用户点击按钮时，链接会被复制到剪贴板，并弹出一个提示框显示已复制的链接。你可以将这段代码嵌入到你的网页中，然后根据需要修改链接和其他样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值