首页 > web前端 > js教程 > 正文

JavaScript实现复制到剪贴板的方法总结

黄舟
发布: 2017-12-04 13:34:59
原创
3420 人浏览过

在我们日常开发工作中,我们会经常用到粘贴复制这个功能,很多时候我们项目中也会出现让你实现复制到剪贴板的功能,下面我们就给大家介绍下JavaScript实现复制到剪贴板的方法总结!

一、实现点击按钮,复制文本框中的的内容



登录后复制

二、复制专题地址和 url 地址,传给 QQ/MSN 上的好友





Js复制代码

登录后复制

三、直接复制 url


登录后复制

四、点击文本框时,复制文本框里面的内容


登录后复制

五、复制文本框或者隐藏域中的内容

登录后复制

六、复制 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)



Zero Clipboard Test



复制
登录后复制

总结:

本文详细介绍了JavaScript实现复制到剪贴板的方法总结,每个方法都有不同点,小伙伴们可以根据自己的需求来选择适合自己的方法,希望对你有所帮助!

相关推荐:

javascript - html5移动开发,复制到剪贴板怎么实现?

一段多浏览器的"复制到剪贴板"javascript代码

JS复制到剪贴板示例代码

以上是JavaScript实现复制到剪贴板的方法总结的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!