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

一、原理：

        使用了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()的用法_普通网友的博客-CSDN博客

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