Js 复制到剪切板

原生js 点击复制到剪切板

今天boss提了一个小功能,需要用到点击复制功能,上网查询下资料,核心代码为

document.execCommand("Copy")

该命令可以将光标选中的部分复制到剪切板,但问题是,光标怎么选中文字?
这就用到另一个函数

input.setSelectionRange(0,input.value.length)

这个函数可以选中input框中的值,参数分别是开始和结束位置

那么核心思路就是

1. 页面上放置一个不可见的input或者创建一个不可见的input并赋值(注意测试hidden类型不行,我是用的是text,设置样 式"opacity: 0 ",不能是display:none)

2. 点击复制按钮,调用setSelectionRange选中隐藏input的值

3. 调用document.execCommand(“Copy”)

html

js

        function copyContent() {
            var hidden = document.getElementById("copyArea")
            hidden.focus(); // 选择对象
            hidden.setSelectionRange(0, hidden.value.length)
            document.execCommand("Copy"); // 执行浏览器复制命令
            alert("复制成功,复制内容为:" + hidden.value)
        }