js实现点击复制网页内容(基于execCommand)
通过execCommand方法来实现,当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。语法如下:
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);
注:在项目开发过程中,PC端没有问题,兼容性不错,但是在移动端ios手机却无法实现复制,兼容性不行,android没问题。。。
具体实现方法如下代码:
html:
<span class="tip">点击可复制</span>
<div class="wrapper">
<p id="text" onclick="copyText()">我把你当兄弟你却想着复制我?</p>
<textarea id="input">这是幕后黑手</textarea>
</div>
CSS:
.wrapper {
position: relative;
background-color: #F1F1F1;
width: 300px;
height: 30px;
}
#input {
position: absolute;
top:;
left:;
opacity:;
z-index: -10;
}
.tip{
display: inline-block;
background-color: #333;
width: 90px;
color: #fff;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 4px;
display: none;
position: absolute;
top: 50px;
left: 0px;
opacity: 0.8;
}
js:
document.getElementsByClassName('wrapper')[0].onmouseenter=function(){
document.getElementsByClassName('tip')[0].style.display='block';
};
document.getElementsByClassName('wrapper')[0].onmouseleave=function(){
document.getElementsByClassName('tip')[0].style.display='none';
};
function copyText() {
var text = document.getElementById("text").innerText;
var input = document.getElementById("input");
input.value = text; // 修改文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
alert("复制成功");
}
参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
js实现点击复制网页内容(基于execCommand)的更多相关文章
- js实现点击复制网页内容(基于clipboard.js)
浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...
- js 实现点击复制文本内容
js 实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...
- 【Html】Clipboard.js 实现点击复制,剪切板操作
可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...
- cliipblard.js 实现点击复制
<script src="js/clipboard.min.js"></script> <script type="text/javascr ...
- js 移动端点击复制字符串
function copyStr(val) { //val 是要复制的字符串 var input = document.createElement("input"); input. ...
- jquery实现点击复制到剪切板
1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...
- 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 点击复制按钮 将文字复制到手机剪贴板
我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...
随机推荐
- 【Codeforces Round #502 (in memory of Leopoldo Taravilse, Div. 1 + Div. 2) D】The Wu
[链接] 我是链接,点我呀:) [题意] 给你n个字符串放在multiset中. 这些字符串都是长度为m的01串. 然后给你q个询问 s,k 问你set中存在多少个字符串t 使得∑(t[i]==s[i ...
- SSM整合(spring,spirngmvc,mybatis)
整合思路 准备环境:导入jar包(spring mybatis dbcp连接池 mysql驱动包 log4j) 工程结构: --------------------------- 1. 整合 ...
- python 在爬虫中timeout设置超时有什么作用
是为了防止url不可访问,或者响应速度太慢而造成的时间浪费. 比如,你要爬取1000个网站,如果有100个需要30s才能返回数据,你等待他们返回的话就需要3000s了,如果你设置10s超时,那么就能知 ...
- MyBatis中动态SQL元素的使用
掌握MyBatis中动态SQL元素的使用 if choose(when,otherwise) trim where set foreach <SQL>和<include> 在应 ...
- Gradle的奇妙之处
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/50465885 Google I/O 2013大会上公布了AS,现在已经发展到2.0-b ...
- MySQL 5.7.10最新版本号源码安装具体过程
,重置密码 利用mysqladmin重置密码 [root@wgq_idc_mon_1_12 mysql5710]#./bin/mysqladmin -h localhost -uroot passwo ...
- SDUT 1225-编辑距离(串型dp)
编辑距离 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 如果字符串的基本操作仅为:删除一个字符.插入一个字符和将一个字符改动 ...
- 王立平--TF卡
最终知道TF卡是什么了... TF卡又称microSD,是一种极细小的快闪存储器卡,由SanDisk(闪迪)公司发明创立. 这样的卡主要于手机使用.但因它拥有体积极小的长处,随着不断提升的容量. 它慢 ...
- [C++设计模式] iterator 迭代器模式
迭代器模式定义:提供一种方法顺序訪问一个聚合对象中各个元素,而又不须要暴露该对象. 迭代器分内部迭代器和外部迭代器.内部迭代器与对象耦合紧密,不推荐使用. 外部迭代器与聚合容器的内部对象松耦合,推荐使 ...
- Codeforces 456B Fedya and Maths 打表找规律
Description Fedya studies in a gymnasium. Fedya's maths hometask is to calculate the following expre ...