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浏览器,也没问题

posted @ 2020-11-24 21:42  ---空白---  阅读(447)  评论(0编辑  收藏  举报