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); ...
随机推荐
- 【BZOJ】 4810: [Ynoi2017]由乃的玉米田
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4810 思路还是比较显然,第一反应应该就是莫队. 考虑怎么维护三个询问,想到了要维护每一个数 ...
- 使用Rancher和私有仓库快速搭建Kubernetes集群
来来来,先出题:Rancher可以快速部署Kubernetes,但其使用的gcr.io上的镜像无法下载怎么办?使用Rancher可以快速部署Kubernetes,但我们需要下载哪些镜像?Rancher ...
- vue-循环并获取dom元素
<ul class="picBox"> <li v-for="(item,index) in picArr" ><img :src ...
- mysql数据库通过二进制 -【恢复数据记录】
1.修改配置文件 vi /etc/my.cnf log-bin = binlog systemctl restart mysqld mysql -uroot -p123456 mysql> sh ...
- 用GraphX分析伴生网络(一)
1. 图论与GraphX 图论是一个数学学科,研究一组实体(称为顶点)之间两两关系(称为边)的特点.通过构建关系图谱,并对关系进行分析,可以实现更好的投放广告,推荐关系等.随着关系图谱越来越强大,计算 ...
- 【SQL Server备份恢复】维护计划实现备份:每周数据库完整备份、每天差异备份、每小时日志备份
在数据库管理中,数据库备份是非常重要的. 通过维护计划向导,可以很方便的完成数据库备份. 下面的例子说明了如何实现数据库的备份,具体的备份策略是:每周日一次完整备份.每天差异备份(除周日外).每小时日 ...
- Lab 9-1
Analyze the malware found in the file Lab09-01.exe using OllyDbg and IDA Pro to answer the following ...
- 加快Gradle的构建过程
Gradle配置文件中加入守护进程 org.gradle.daemon=true 这个守护进程是在第一次编译时才开启进程进行编译,之后的编译将不再开启进程重新编译,这样以减小编译的速度
- Windows下安装python的scipy等科学计算包(转)
如果要使用python进行科学计算.数据分析等,一定要安装scipy.seaborn.numpy等等包. 但Windows下安装python的第三方库经常会出现问题.此前,已介绍过Windows下如何 ...
- linux服务器查看项目日志命令
1.tailf mywork.log | grep --line-buffered findUserList 实时跟踪日志,这里是只要findUserList 这个方法被运行,就会将它的日志 ...