无需textarea或input标签JS直接实现元素内容复制

前言

之前我发过复制类的JS代码（使用js点击复制按钮将textarea框隐藏-雪哥尔 (xulgr.com)），其中只是使用CSS隐去textarea文本框而已，对于HTML布局来说有点不美观，这次我想到了利用JS创建input元素，再把复制内容放进去实现复制，全程是JS执行不会显示HTML。

代码

<div class="content">被复制的内容</div>
<button id="xulgrbtn">点击复制</button>

<script>
function XulgrCopyText(text){
    var tag = document.createElement("input");
    tag.setAttribute("id","xulgrcopyinput");
    tag.value = text;
    document.getElementsByTagName("body")[0].appendChild(tag);
    document.getElementById("xulgrcopyinput").select();
    document.execCommand("Copy");
    document.getElementById("xulgrcopyinput").remove();
}
document.getElementById("xulgrbtn").onclick = function(){
    var xulgrcontent = document.querySelector(".content").innerText;
    XulgrCopyText(xulgrcontent);
    alert("复制成功");
}
</script>

思路

1）先创建一个JS复制函数，在函数内创建一个input元素，并将要拷贝的内容写放到元素中去；

2）利用input元素的select()方法来选中input内的所有内容；

3）使用函数execCommand(‘Copy’)方法进行选中内容的复制；

4）最后用remove()函数删除掉创建的input元素，就大功告成啦！

补充

1.复制自身内容

<div class="content">被复制的内容</div>

<script>
function XulgrCopyText(text){
    var tag = document.createElement("input");
    tag.setAttribute("id","xulgrcopyinput");
    tag.value = text;
    document.getElementsByTagName("body")[0].appendChild(tag);
    document.getElementById("xulgrcopyinput").select();
    document.execCommand("Copy");
    document.getElementById("xulgrcopyinput").remove();
}
document.querySelector("content").onclick = function(){
    XulgrCopyText(this.innerText);
    alert("复制成功");
}
</script>

 

2.再放一个直接将被复制内容放进按钮容器中的方法，此方法需要引入jquery

<button id="xulgrbtn" xulgrcopay="被复制的内容">点击复制</button>

<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>
<script>
function XulgrCopyText(text){
	var tag = document.createElement("input");
	tag.setAttribute("id","xulgrcopyinput");
	tag.value = text;
	document.getElementsByTagName("body")[0].appendChild(tag);
	document.getElementById("xulgrcopyinput").select();
	document.execCommand("Copy");
	document.getElementById("xulgrcopyinput").remove();
}
$("#xulgrbtn").click(function(){
	var xulgrcontent = $(this).attr("xulgrcopay");
	XulgrCopyText(xulgrcontent);
	alert("复制成功");
});
</script>

3.当存在多个相同的类时，点击复制被点击的类的自身内容（jQuery不支持多个相同id存在，所以用class类）

<div class="xulgrbtn">复制内容一</div>
<div class="xulgrbtn">复制内容二</div>
<div class="xulgrbtn">复制内容三</div>
......

<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.js"></script>
<script>
function XulgrCopyText(text){
  var tag = document.createElement("input");
  tag.setAttribute("id","xulgrcopyinput");
  tag.value = text;
  document.getElementsByTagName("body")[0].appendChild(tag);
  document.getElementById("xulgrcopyinput").select();
  document.execCommand("Copy");
  document.getElementById("xulgrcopyinput").remove();
}
$('.xulgrbtn').on("click",function(){
  var xulgrcontent = $(this).text();
  XulgrCopyText(xulgrcontent);
  alert("复制成功");
});
</script>