Js 复制到剪切板

原生js 点击复制到剪切板

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

document.execCommand("Copy")

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

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

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

那么核心思路就是

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

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

调用document.execCommand(“Copy”)

html

<input type='button' value='复制链接' onclick="copyContent()"> <input type='text' id='copyArea' value = '测试' style="opacity: 0"/>

js

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