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 点击复制按钮 将文字复制到手机剪贴板
我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...
随机推荐
- 《你又怎么了我错了行了吧》【Alpha】Scrum meeting 4
第四天 日期:2019/6/17 前言: 第4次会议在女生宿舍召开 对前面的系统改进有了方向,讨论了代码编写的分配问题 1.1 今日完成任务情况以及明天任务安排 姓名 当前阶段任务 下一阶段任务 刘 ...
- 02023_Arrays类的方法练习
1.定义一个方法,接收一个数组,数组中存储10个学生考试分数,该方法要求返回考试分数最低的后三名考试分数. public static int[] method(double[] arr){ Arra ...
- Codeforces Round #136 (Div. 1) B. Little Elephant and Array
B. Little Elephant and Array time limit per test 4 seconds memory limit per test 256 megabytes input ...
- HDU 3886
一开始又往打表想了....不过,打表确实不好处理,转DFS. DFS有几个要注意的问题,1.对于枚举以零开始的数.我纠结了很久,最终学习别人的方法,设一个BOOL,并且假设最高一位有零,很方便.2.当 ...
- POJ 1320
作弊了--!该题可以通过因式分解得到一个佩尔方程....要不是学着这章,估计想不到.. 得到x1,y1后,就直接代入递推式递推了 x[n]=x[n-1]*x[1]+d*y[n-1]*y[1] y[n] ...
- bzoj1588: [HNOI2002]营业额统计(splay)
1588: [HNOI2002]营业额统计 题目:传送门 题解: 复习splay所以来刷个水... 题目描述不是特别清楚:应该是找第i天以前一个最小的营业额和第i天做差的最小值作为第i天的最小波动值 ...
- DB-MySQL:MySQL 序列使用
ylbtech-DB-MySQL:MySQL 序列使用 1.返回顶部 1. MySQL 序列使用 MySQL 序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想 ...
- 队列(FIFO)详解
写在前面的话: 一枚自学Java和算法的工科妹子. 算法学习书目:算法(第四版) Robert Sedgewick 算法视频教程:Coursera Algorithms Part1&2 本文 ...
- Hua Wei 机试题目三---2014
一.根据对应规则进行翻译输出 描述:已知有如下的对应规则: ,则输入任意个正整数,输出经过规则翻译以后对应的结果. 例如:输入:1234:输出bcde. 题目很简单,我觉得需要注意的问题就是对于大整数 ...
- vscode 插件推荐 - 献给所有前端工程师
VScode现在已经越来越完善.性能远超Atom和webstorm,你有什么理由不用它?在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用. 走马观 ...