jQuery/Js复制文本到剪贴板

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>jQuery/Js复制文本到剪贴板</title>
  <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
  <script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
 </head>
 <body>
  <div id="demo">http://www.baidu.com</div>
  <button class="btn">复制</button>
  <script>
    var content = $("#demo").html();
    var clipboard = new Clipboard(‘.btn‘, {
        text: function() {
            return content;
        }
    });
    clipboard.on(‘success‘, function(e) {
        alert("复制成功");
    });

    clipboard.on(‘error‘, function(e) {
        console.log(e);
    });
  </script>
 </body>
</html>

来自微信公众号:编程社

程序员日常进阶宝典,欢迎关注!

原文地址:https://www.cnblogs.com/ai10999/p/11449513.html

时间: 2024-10-29 13:43:43

jQuery/Js复制文本到剪贴板的相关文章

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

关于js复制文本信息(按钮级别)

最近应产品要求,需要实现一个按钮级别热复制文本功能,效果就是单击按钮复制对应的文本,该文本是需要从数据库里面取出来然后加密的,最初的打算是使用js插件在前台页面搞定.    于是上网找了一些相关资料,发现几乎都是用的zeroClipBoard这个插件,这个插件使用的是flash来实现复制效果,但是flash在目前已 经不再流行,甚至有些浏览器已经不再对flash支持或者完全禁用,于是便暂时放弃了这个想法.但是在查找途中发现ie竟然可以一句代码搞定复制,顿时觉 得好无语(尤其是对比ie和其他浏览器

JavaScript复制文本到剪贴板

1 function copyToClipboard2() { 2 if (document.all) { //判断IE 3 var e = document.all("alltext2").value; 4 window.clipboardData.setData('text', e); 5 alert("复制成功,立即开始营销挣钱!"); 6 } 7 else { 8 alert("您的浏览器不支持剪贴板操作,请自行复制."); 9 }; 1

js复制内容到剪贴板格式化粘贴到excel中

<input id="Button1" type="button" value="导出EXCEL" onclick="copyToClipboard('ta')"> <div style="width: 760px;float:left;" id="ta"> <table border="0" style="" cel

ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

本人在项目中使用的js版本.为了方便大家下载.直接粘贴代码给大家看.版本是1.2.0 /*! * ZeroClipboard * The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. * Copyright (c) 2013 Jon Rohan, James M. Gr

JS 复制文本兼容移动端 iOS &amp; android

有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden" 或者 display:none 则无法选中文本,也就无法复制,可以设置 position:absolute;left:-999px; 来隐藏文本域. 静态复制 const copyInput = document.querySelector('#copyInput'); copyInput.value

JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span> js代码 <script type="text/javascript"> function copyArticle(even

js复制文本

<div cols="20" id="biao1" style="display: none;">{$banner.title}</div> function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.valu

点击复制文字到剪贴板兼容性安卓ios

一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能 于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类: 一类是js原生方法,这种方法兼容性不好,不兼容ios: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 另外,还有一些坑要注意 input/textarea为disabled不可用(readonly可以) input/textarea为hidden不可用 try{ var copy