使用JS实现复制功能

原理:

1、document.execCommand可作用于以下类型的元素上:

  • input
  • textarea
  • contenteditable属性为"true"的元素
  • designMode属性为"on"的iframe元素

2、使用select()方法选中需要复制的文本。

由于select()方法只能作用于文本框,所以用这个方法来实现复制功能有很大的局限性。

若要突破限制,则需要使用其它方式(比如手动)选中想要复制的文本。
简单实现:
//html
<textarea style="width: 200px;height: 200px;" id="edit" autofocus></textarea>
<button id="copy">copy</button>

//js
document.getElementById('copy').addEventListener('click',function(e){
    var dom=document.getElementById('edit');
    dom.select();  //若是使用其它方式选中要复制的文本,则此处可去掉
    document.execCommand('copy',false,null);  //这一步是关键,会选中当前窗口中被选中的文本。若是写成:frames['frame'].document.execCommand('copy',false,null),则会复制name=frame中被选中的文本
})
document.getElementById ('edit').addEventListener('copy',function(e){
    console.log(e);
})
document.execCommand()兼容性
compatibility.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 910评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,329评论 1 41
  • 总结一下网易2018内推的测试题,我看python的比较少,所以献上自己的low代码,都AC过的,大毛病应该没有,...
    mrlevo520阅读 4,967评论 2 4
  • 随着时代的发展,人们对网络的需求越来越高,好像我们都习惯了睁开眼拿起手机看看朋友圈,新闻……,最近和几个家长在讨论...
    谁是谁的谁_2dc9阅读 192评论 0 0