Javascript 粘贴板
1.前言
本节讲述如何封装一个操作粘贴板的方法
- 原理:选中某个Dom元素(比如文本域),执行区域复制命令即可。
- 相关API:document.execCommand():该方法允许运行命令来操纵可编辑内容区域的元素。传入"Copy"参数表示拷贝当前选中内容到剪贴板。(启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。)
2.封装思路
- (1)创建一个textarea元素,写入要拷贝的文本
- (2)将该元素插入到Dom中
- (3)选中该元素
- (4)执行复制到粘贴版的命令
- (5)移除该元素
3.代码实现
function copyUrl_oz(val){
//创建元素
var node_textarea = document.createElement('textarea')
//隐藏该元素
node_textarea.style.opacity = 0
//写入元素内容(要复制的文本)
node_textarea.value = val
//将元素加入Dom中
document.body.appendChild(node_textarea)
//选中该元素
node_textarea.select()
//复制以选中元素的内容到粘贴板
document.execCommand("Copy")
//复制完毕,移除该元素
document.body.removeChild(node_textarea)
}
在PC端中,测试了Chrome/火狐/edge/IE11浏览器都没问题
在手机端,测试了IOS13种的Chrome/火狐/edge浏览器,也没问题