点击复制-点击div或者p标签复制内容到剪切板

点击复制-点击div或者p标签复制内容到剪切板

最近在做一个需求,就是需要点击div或者p标签需要复制其中的内容到剪切板中,可以快速的粘贴
如图下所示:


点击复制-点击div或者p标签复制内容到剪切板_第1张图片
1059788-20170904151716304-1691395761.gif

首先先看MDN的document.execCommand的命令
命令是这样描述的
当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。
代码如下

点击的是按钮,但是复制的是input框中的内容

点击复制后在右边textarea CTRL+V看一下

点击的是div或者p标签

但是当点击div或者p标签时,并不能上面的方法一样,这时就要曲线救国一下。使用textarea标签了
html部分



我把你当兄弟你却想着复制我?

script部分


亲测好用,简直无敌,可见灵活运用知识的重要性啊

原生 js 实现点击按钮复制文本
document.execCommand

你可能感兴趣的:(点击复制-点击div或者p标签复制内容到剪切板)