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

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

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

如图下所示：

1059788-20170904151716304-1691395761.gif

首先先看MDN的document.execCommand的命令

命令是这样描述的

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

代码如下

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

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

var btn = document.getElementById('btn');

btn.addEventListener('click', function(){

var inputText = document.getElementById('inputText');

var currentFocus = document.activeElement;

inputText.focus();

inputText.setSelectionRange(0, inputText.value.length);

document.execCommand('copy', true);

currentFocus.focus();

});

点击的是div或者p标签

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

html部分

.wrapper {position: relative;}

#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}

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

这是幕后黑手

copy

script部分

function copyText() {

var text = document.getElementById("text").innerText;

var input = document.getElementById("input");

input.value = text; // 修改文本框的内容

input.select(); // 选中文本

document.execCommand("copy"); // 执行浏览器复制命令

alert("复制成功");

}

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

html 文本标签点击复制,点击复制-点击div或者p标签复制内容到剪切板相关推荐

js实现复制文本内容到剪切板
js实现复制文本内容到剪切板一.总结一句话总结:就是document的execCommand('copy')方法二.js实现复制文本内容到剪切板直接上代码: 1 <script type ...
h5页面调用用户手机打电话功能以及复制内容到剪切板
通过配合vant的面板组件实现该功能: 在index.html中添加meta标签:<meta name="format-detection" content="te ...
android 复制内容到剪切板方法
/*** 复制内容到剪切板** @param copyStr* @return*/ private boolean copyStr(String copyStr) {try {//获取剪贴板管理器Cl ...
Android复制内容到剪切板上
Android复制内容到剪切板上 fun Context.copyToClipboard(label: String, data: String) {getSystemService<Clipb ...
JavaScript复制内容到剪切板
复制内容到剪切板分两种情况,一种是从页面已有的可选元素中选中内容进行复制,一种是将Javascript代码中的字符串直接复制到剪切板. 复制页面元素选中内容 html代码: <input typ ...
js调用浏览器的复制功能复制内容到剪切板
js调用浏览器的复制功能: 浏览器自带复制粘贴功能,通过js调用浏览器的复制功能实现复制文本内容到剪切板浏览器复制命令:document.execCommand('Copy') 具体代码实现: // ...
js禁止右键,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
兼容手机PC,点击即可复制文本内容到剪切板插件clipboard.js
开源项目 https://github.com/zenorocha/clipboard.js. (拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另外,它不应该依靠flash以及其 ...
一段js实现复制文本内容到剪切板
<script type="text/javascript"> function copyUrl2(){var Url2=document.getElementById ...

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

html 文本标签点击复制,点击复制-点击div或者p标签复制内容到剪切板相关推荐

最新文章

热门文章