ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

前端 通过点击对指定内容进行复制

2022-03-30 11:31:43  阅读:347  来源: 互联网

标签:body copy 浏览器 execCommand 前端 点击 复制 input document


1.浏览器中自带的Document.execCommand()复制方法 

注:不推荐使用功能过时  且浏览器可能会随时删除

onCopy(){
            //创建一个input框
            const input = document.createElement("input")
            //将指定的DOM节点添加到body的末尾
            document.body.appendChild(input)
            //设置input框的value值为直播地址
            input.setAttribute("value", e)
            //选取文本域中的内容
            input.select()
            //copy的意思是拷贝当前选中内容到剪贴板
            //document.execCommand()方法操纵可编辑内容区域的元素
            //返回值为一个Boolean,如果是 false 则表示操作不被支持或未被启用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //删除这个节点
            document.body.removeChild(input)
    }

2.Clipboard.writeText方法 

注:在使用navigator clipboard的api  情况下浏览器允许使用js 脚本读写剪贴板,自动复制或粘贴内容  

navigator.clipboard.writeText(”复制内容“).then(() => {
      "成功后执行的一些方法"
  })

 

标签:body,copy,浏览器,execCommand,前端,点击,复制,input,document
来源: https://www.cnblogs.com/jie98/p/16076121.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有