js 鼠标点击元素复制指定的内容

原创已于 2022-07-07 19:15:38 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #react.js #开发语言 #前端

于 2022-07-07 19:09:15 首次发布

本文详细介绍了如何利用DOM的document.execCommand()方法实现网页文本的复制功能。通过创建临时DOM元素，设置选区，调用execCommand('copy')来触发浏览器的复制行为。同时，还探讨了document.createRange()在选区操作中的作用，以及相关方法的使用技巧。文章提供了完整的JavaScript函数示例和HTML按钮触发复制的代码片段。

一、原理：

使用了Dom原生的API，document.execCommand(commandStr)

当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件,打开新文件,撤消、重做操作…等等.

founction：

function copyText(event){
    const ptext= document.createElement('p');  //创建Dom用于储存需要复制的值
    ptext.innerHTML = event || ''; //暂存
    doucument.body.appendChild(ptext);  //插入到页面，动态生成一个HTML对象
    /*
    *仅用于<input> <textarea>标签
    ptext.setAttribute('value',text);
    ptext.select();  //选择对象 select只对<input> <textarea>有效，要获取到点击的值，就到input中选中复制
    */
    /*<p>标签用下面的*/
    const range = document.createRange(); //创建range对象
    /* 窗口的selection对象，表示用户选择的文本 */
    window.getSelection().removeAllRanges();  //将已包含的selection对象先删除掉  
    range.selectNode(ptext);  // 设定range包含的节点对象 
    window.getSelection().addRange(range); // 将要复制的区域的range对象添加到selection对象中

    const status：boolean = document.execCommand('copy'); // 触发浏览器的复制功能，执行copy命令，copy用户选择的文本
    if(status){
       message.success('复制成功');
    }else{
       message.error('复制失败');
    }
    document.body.removeChild(ptext);
    window.getSelection().removeAllRanges();  //删除鼠标点击选中的文字  

}

html:

<Button onClick=copyText(record.sql)> 点我，复制</Button>

二、document.execCommand()方法处理Html数据时常用语法格式如下:

document.execCommand(sCommand[交互方式, 动态参数])

其中：交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框，

动态参数一般为可用值或属性值（如”true”）。

三、 document.createRange()

选中元素→range→selection是一一对应的，即选区必须连续，不可以有分开的多个区域。另外，被选元素必须在dom树上，不可以是游离元素，并且实践发现display不能为none，visibility不能为hidden，即使不需要渲染。也就是说我可以创建一个游离元素，插入dom树，选择后copy，然后立刻从dom树移出，整个过程都在浏览器下一次渲染之前，所以页面上没有任何变化。

一些资料

原生dom的属性方法： JS的Document属性和方法 - nd - 博客园

document.execCommand()的用法：详解Javascript中document.execCommand()的用法_普通网友的博客-优快云博客

document.createRange() 用法：document.createRange剪贴板API - natsu07 - 博客园