用js写了复制事件，使用模拟点击没用，人手动点击有效果

Posted 2023-05-09

function modifyText()
var input = document.createElement('input'); //创建input节点
input.setAttribute('type', 'text'); //定义类型是文本输入
input.setAttribute('id','taokouling');
input.setAttribute('value','HIQrwy88iV');
var bd=document.getElementsByTagName('div')[0];
bd.insertBefore(input,null);
var Url2=document.getElementById("taokouling");
Url2.select(); // 选择对象
try
var a=document.execCommand('copy', true, null); // 执行浏览器复制命令
console.log(a)
catch(e)
console.log(e)



var el = document.body;
el.addEventListener("click", modifyText, false);
$("#btn").trigger("click");
el.click()

这是因为当发出copy命令时，上面创建的input节点很可能还未创建完毕（这是个异步过程），所以就失败了。如果你的目的是想把文本复制到剪贴板，建议用下面的代码，兼容大部分浏览器，而且无需创建Input节点，一切在静默中进行：

function copyToClipboard(s)
   if(window.clipboardData)
      window.clipboardData.setData('text',s);
   else
      document.oncopy=function(e)
         e.clipboardData.setData('text',s);
         e.preventDefault();
         document.oncopy=null;
      
      document.execCommand('Copy');
   

用法举例：

copyToClipboard('HIQrwy88iV');

参考技术A

使用swf的copycat即可。。。

复制文本事件(clipboard.min.js)

在项目中有这么一个需求，点击按钮复制一段文本，就像下图中的点击微信我们，弹出一个弹窗，点击好的跳转微信端添加好友。

法一：（clipboard.min.js）

 

需要使用到clipboard.min.js，下载链接：https://github.com/Superheroo/copy-text/tree/master

 代码如下：

html部分：

<div id="target">微信号</div>

<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">

<a class="copy" href="weixin://">复制按钮</a>

</button>

js部分：

$(document).ready(function () {

var targetText = $("#target").text();

var clipboard = new ClipboardJS(\'#copy_btn\');

clipboard.on(\'success\', function (e) {

e.clearSelection();

});

});

 红色是点击处，黄色是点击时要复制的内容，橙色处不可少

法二：（原生JS）

在页面中添加一个 <textarea>，然后把它隐藏掉

点击按钮的时候，先把 <textarea> 的 value 改为 <p> 的 innerText，然后复制 <textarea> 中的内容

html：

<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
<p id="text">我把你当备胎你却想着复制我？</p>
<textarea id="input">这是幕后黑手</textarea>
<button onclick="copyText()">copy</button>
</div>

js：

<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
</script>