通过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. Anaconda安装tensorflow遇到的问题(转)

    tensorflow安装教程 1.找不到Anaconda Prompt 其他教程中说AnacondaPrompt在安装的Anaconda文件夹下面(如D:/Anaconda),但是我在安装中没有找到, ...

  2. botot framework选择下拉框

    1,下拉框不能输入文字,如图: 方法: select from list    id=xxx   要选择的数据 2.下拉框可输入文字,如图: 方法: click element   di=xxx   ...

  3. Hadoop集群(第12期)_HBase简介及安装

    HBase简介 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问,是Google的BigTable的开源实现.HBase的目标是存储并处理大型的数据,更具体地说仅 ...

  4. 在centOS6.5 上安装使用pipework

    需求:镜像生成了2个含有tomcat的容器,用nginx进行负载均衡.但是容器重启后ip会自动改变...所以使用pipework进行分配静态ip pipework安装 OS:centos6.5 第一步 ...

  5. MFC学习碎片

     (1)MFC程序中弹出框:         MessageBox(str,_T("程序执行结果"),MB_OK); AfxMessageBox("Hello&quo ...

  6. 经常使用的MySQL语句整理

    本文參考:http://www.blogjava.net/bolo 部分自己补充,长期更新 MySQL的SQL语句写法,除了那些主要的之外,另一些也算比較经常使用的,这里记录下来,以便以后查找. 好记 ...

  7. Ambari-单步创建cluster

    Ambari-单步创建 总体介绍 单步创建集群即对于集群内每个服务的安装.开启.组成服务的每个组件host信息的设置等操作都进行一次ambari-server的restAPI的调用. 这样做提高了对集 ...

  8. PHP 7给我震撼

    看了一些php7(ng)的讨论,目前还没有去下beta版尝试编译. 作为一个phper,一直都有关注php本身语言的发展.以前在jumei工作的时候就听罗sir谈到过php ng,性能将超过faceb ...

  9. cocos2d 3.3 lua 代码加密 luac

    1.0 cocos luacompile 使用方法 我用的普通的cocos2d lua,没用quick,quick好像能够对整个资源包含图像和音频都加密,打包成zip.我看了下luacompile 的 ...

  10. 【BZOJ 1878】 HH的项链

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1878 [算法] 显然,在线算法是不可做的,考虑离线算法 笔者的做法是莫队算法,时间复 ...