思路
小蝣说:
以下有些是伪代码,只用来阐述思路
一、先将要被复制的内容提取出来
const copyContent = xxx;
二、用 JS 创建一个 Input 元素出来
const oInput = document.createElement("input");
三、将第一步提取出的内容,作为 input 的 value 赋值给它
oInput.value = copyContent;
四、将创建的 input 的元素插入到 body 中
//(重中之重,如果无此操作后面的一切将无效)
//博主亲身经历的坑
document.body.appendChild(oInput);
五、调用 input 元素默认的选中函数
oInput.select();
六、调用 execCommand 函数复制当前选中部分的内容
document.execCommand("copy");
七、复制成功后将创建插入的 input 元素移除
document.body.removeChild(oInput);
封装成函数
const $copy = (el/*触发复制功能的元素例如一个Button*/,copyContent)=>{
el.onclick = () => {
const oInput = document.createElement("input");
oInput.value = copyContent;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("copy");
document.body.removeChild(oInput);
alert("复制成功");
};
}
使用
const oButton = document.querySelector('button');
const copyContent = document.querySelector('content').innerText;
$copy(oButton,copyContent);