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 353 A】Domino
[链接] 我是链接,点我呀:) [题意] [题解] 分类讨论一波 设第一个数组的奇数个数为cnt1 第二个数组的奇数个数为cnt2 显然只有在(cnt1+cnt2)%2==0的情况下. 才可能第一个数 ...
- SSH框架整合截图总结(一)
分页相关属性 --------------------------------------------------------------- 分页思路表单提交(只需传递当前页的值) ->acti ...
- (2)Spring Boot返回json数据【从零开始学Spring Boot】
在做如下操作之前,我们对之前的Hello进行简单的修改,我们新建一个包com.kfit.test.web 然后新建一个类HelloControoler, 然后修改App.java类,主要是的这个类就是 ...
- Advanced Fruits HDU杭电1503【LCS的保存】
Problem Description The company "21st Century Fruits" has specialized in creating new sort ...
- 小米2S电池电量用尽充电无法开机解决方法
背景: 昨晚睡觉前关机,记得电量还有百分之七八十,但早上起床后,指示灯一直红灯闪烁.按开机键和其它键都没反应! ! 解决方法: 扣下电池,用万能充冲电,略微多冲一会,由于 ...
- Leetcode--easy系列2
#14 Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...
- 12. mysql show status
状态名 作用域 详解 Aborted_clients Global 因为client没有正确关闭连接导致client终止而中断的连接数 Aborted_connects Global 试图连接到MyS ...
- c语言实现皇帝翻牌游戏
一个综合的游戏,对所学的知识进行整合!融会贯通! #include <stdio.h> #include <stdlib.h> #include <string.h> ...
- JAVA设计模式之【原型模式】
1.案例一 学生复制 package Prototype; /** * Created by Jim on 2016/10/1. */ public class Student implements ...
- Jquery validform
一.validform是什么? validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入, 就可以对整个表 ...