前端复制功能方法总汇-CSDN博客

本文链接：https://blog.csdn.net/weixin_42232622/article/details/127795040

前端复制到剪贴板

有时候我们点击按钮，要将一些内容复制到剪贴板，大家是怎么实现的呢？
针对3种情况 , 实现点击按钮实现复制到剪贴板 👇

Ⅰ、点击，复制一个 input 框

表单元素是可以直接被选中的，我们直接 select 选中

<body>
  <input type="text" value="123456" id="textInput">
  <button onclick="copyInput()">copy</button>
</body>
<script>
function copyInput() {
    const input = document.getElementById("textInput");
    input.select();  //选中该输入框
    document.execCommand('copy');  //复制该文本 
}
</script>

👉 选中该元素
👉 复制选中的内容

Ⅱ、点击，复制一个值

则需要个载体，我们先创建它，复制完成在删除

<body>
    <button onclick="copy(123456)">Copy</button>
</body>
<script>
function copy(val) {
    const input = document.createElement("input"); //创建input 
    input.setAttribute("value", val);            //把input设置value
    document.body.appendChild(input);            //添加这个dom对象
    input.select();                              //选中该输入框
    document.execCommand("copy");                //复制该文本 
    document.body.removeChild(input);            //移除输入框
}
</script>

单纯复制一个值，实际上还是得选中一个元素
👉 创建 input
👉 设置其值
👉 在dom 中添加该元素
👉 选中该元素
👉 复制选中的内容
👉 移除 input

Ⅲ、点击，复制一个 dom 中的内容

非表单元素，我们没办法选中，所以需要其他方法

<body>
    <div id="box">123456</div>
    <button onclick="copyDiv()"></button>
</body>
<script>
    function copyDiv() {
        var range = document.createRange();
        range.selectNode(document.getElementById('box'));
        var selection = window.getSelection();
        if (selection.rangeCount > 0) selection.removeAllRanges();
        selection.addRange(range);
        return document.execCommand('copy');
    }
</script>