JS 点击复制
一、原理分析
浏览器提供了 copy 命令 ,可以复制选中的内容
document.execCommand("copy")
如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板
但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好使
最后我的解决方案是,在页面中添加一个 <textarea>,然后把它隐藏掉
点击按钮的时候,先把 <textarea> 的 value 改为 <p> 的 innerText,然后复制 <textarea> 中的内容
二、代码实现
HTML 部分

<style type="text/css">
.wrapper {position: relative;}
#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style> <div class="wrapper">
<p id="text">我把你当兄弟你却想着复制我?</p>
<textarea id="input">这是幕后黑手</textarea>
<button onclick="copyText()">copy</button>
</div>

JS 部分

<script type="text/javascript">
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
</script>

JS 点击复制的更多相关文章
- JS 点击复制Copy (share)
分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...
- JS 点击复制Copy
1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...
- JS 点击复制按钮 将文字复制到手机剪贴板
我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...
- JS点击复制
<!DOCTYPE html><html><head> <script type="text/javascript"> functi ...
- js 点击复制内容
<textarea id="pushUrlsTxt" rows="5" cols="55"></textarea> ...
- JS 点击复制Copy插件--Zero Clipboard
写博客就是一周工作中遇到哪些问题,一个优点就是能够进行一个总结,另外一个优点就是下次遇到相同的问题即使那你记不住,也能够翻看你的博客攻克了.相同也能够帮到别人遇到与你一样问题的人.或者别人有比你更好的 ...
- js点击复制剪贴板
代码用原生写的.工作中用的angular,所以如果有用angular的话,请把js代码copyToClipboard函数中的document.getElementById(elementId).inn ...
- js 点击复制文字
复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...
- js 点击复制代码 window.clipboardData.setData
var v = document.getElementById("forcopy").value; window.clipboardData.setData('text',v); ...
随机推荐
- CTF显隐术:九连环
题目:http://www.shiyanbar.com/ctf/2007 这个也挺基础的,需要注意的是:1.不要因为binwalk扫不出来就以为没有隐藏嵌入数据.2.千万不要暴力破解压缩包,如果是这样 ...
- angular --- s3core移动端项目(三)
angular.module('myApp') .directive('listActive',functon(){ return { restrict:'A', scope:{ listActive ...
- laravel进行单元测试的时候如何模拟数据库以及mockery的调用
单元测试是独立的,所谓的独立是指有独立的运行容器,独立的数据库. 这样做有什么好处呢? (1). 不会跟正常的容器产生冲突,继而影响正常业务. (2). 数据库独立防止数据被修改影响单元测试结果. 这 ...
- vue中提示toFixed不是函数
vue中toFixed获取小数点后两位 错误提示:.toFixed is not a function解决办法:Number(_this.group_cash).toFixed(2) 转自:http ...
- Quartz的基本使用之入门(2.3.0版本)
一.Quartz可以用来做什么 Quartz是一个强大任务调度框架,我工作时候会在这些情况下使用到quartz框架,当然还有很多的应用场景,在这里只列举2个实际用到的 餐厅系统会在每周四晚上的22点自 ...
- Eclipse调试多线程代码
Eclipse调试多线程代码 标签: eclipse 调试 多线程 | 发表时间:2013-02-16 05:51 | 作者:czjuttsw 分享到: 出处:http://blog.csdn.net ...
- Win10系列:C#应用控件进阶2
矩形 若要绘制矩形需要用到Rectangle元素,通过指定Rectangle元素的Width和Height属性值来确定矩形的尺寸.而设置RadiusX和RadiusY属性值能得到圆角的矩形,这两个属性 ...
- Python之路-文件操作(py3)
文件操作的基本步骤: 1.打开文件:f=open('filename'),with open('filename') as f 2.操作文件:增,删,改,查 3.关闭文件:f.close 打开文件 p ...
- 1095 解码PAT准考证
PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: 第 5~10 位是考试日期,格式为年.月. ...
- copy GC 和 mark & compaction GC的算法异同
先标记 然后 copy GC是,对所有child,判断, 如果child没有被访问过,那么拷贝到新地址,child的forwording指向新地址,child标记为已访问,把自己对child的引用改为 ...