JavaScript将内容复制到剪切板,使用document执行复制操作,前端实现复制到剪切板,无需导入插件

参考网上很多文章,整理了出两个实现方法,纯JavaScript操作DOM实现的,不需要导入其他插件,理论前端框架都能使用(本人新手,勿喷)

1) 创建节点的方法实现复制

var el= document.createElement("input");//创建input节点
document.body.appendChild(el);//将节点添加到body
el.setAttribute("id", "el_id");//为input节点添加id,用来查到此节点
document.getElementById("el_id").value = str;//将需要复制的字符串赋值到input的value中
el.select(); 	//选中文本(关键一步)
document.execCommand("Copy");//执行浏览器复制功能(关键一步)
document.body.removeChild(el);//复制完成后删除节点

2)获取页面中的节点实现复制(仅限input和textarea框)

document.getElementById("copyInput").select(); //根据ID选择器获取节点,获取之后使用select选中文本
document.execCommand("Copy"); //执行复制功能

不清楚可不可以使用隐藏的input来实现其他标签的复制内容,通过获取隐藏的input框的value值,然后执行复制