通过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)的更多相关文章

  1. js实现点击复制网页内容(基于clipboard.js)

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

  2. js 实现点击复制文本内容

    js  实现点击复制文本内容 <table> <tr><td>姓名:<span onclick="copyContent(this);" ...

  3. 【Html】Clipboard.js 实现点击复制,剪切板操作

    可以使用cdn 或者直接下载 设置好引用路径(百度云下载) <script type="text/javascript" src="./dist/clipboard ...

  4. cliipblard.js 实现点击复制

    <script src="js/clipboard.min.js"></script> <script type="text/javascr ...

  5. js 移动端点击复制字符串

    function copyStr(val) { //val 是要复制的字符串 var input = document.createElement("input"); input. ...

  6. jquery实现点击复制到剪切板

    1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...

  7. JS 点击复制Copy (share)

    分享自:http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html 1.实现点击按钮,复制文本框中的的内容 1 <script t ...

  8. JS 点击复制Copy

    1.实现点击按钮,复制文本框中的的内容 1 <script type="text/javascript"> 2 function copyUrl2() 3 { 4 va ...

  9. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

随机推荐

  1. 【Educational Codeforces Round 48 (Rated for Div. 2) D】Vasya And The Matrix

    [链接] 我是链接,点我呀:) [题意] 告诉你每一行.每一列的异或和. 让你求出一个符合要求的原矩阵. [题解] 显然应该有 a1^a2^....^an = b1^b2^....^bn 也即两边同时 ...

  2. 前端框架Bootstrap简单介绍

    下载: 解压之后: 把这些文件拷贝到项目中 页面使用时  只需要引入: 然后我们就可以参考官网来设计需要的前端页面了 设计一个按钮:button 只需要标明css样式中使用的类  下面就是现实效果:

  3. PL/SQL控制语句

    本节要点: l  选择结构控制语句 if条件控制语句 Case语句 l  循环结构控制语句 基本loop循环 for循环 while循环 嵌套循环 PL/SQL既然是面向过程的编程语言,那么它就有针对 ...

  4. ExtJs之Ext.XTemplate:模板成员函数

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  5. 第二篇:SpringBoot配置详解

    SpringBoot 是为了简化 Spring 应用的创建.运行.调试.部署等一系列问题而诞生的产物,自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖 ...

  6. HDU 4358

    看了题解那个弱化版后,马上就去做了HDU 3333这道题,发现有可用的地方.于是往这方面想,主要是处理如何确定一个数出现K次的问题.想到了从左往右把每个数出现的次数记下来,但感觉不是这样,呃,再看别人 ...

  7. [Performance] Optimize Paint and Composite for the website

    "Paint" is one of the most preference killer, it can easily cost more than 60fps, and once ...

  8. 赵雅智_android获取本机运营商,手机号部分能获取

    手机号码不是全部的都能获取.仅仅是有一部分能够拿到. 这个是因为移动运营商没有把手机号码的数据写入到sim卡中.SIM卡仅仅有唯一的编号.供网络与设备 识别那就是IMSI号码,手机的信号也能够说是通过 ...

  9. thinkPHP 空模块和空操作、前置操作和后置操作 具体介绍(十四)

    本章节:介绍 TP 空模块和空操作.前置操作和后置操作 具体介绍 一.空模块和空操作 1.空操作 function _empty($name){ $this->show("$name ...

  10. 2017-3-4 leetcode 414 485 495

    虽说周末要早起来着,但是日子过得有点奇怪,一不小心就忘掉了... leetcode414 https://leetcode.com/problems/third-maximum-number/?tab ...