最近项目有个点击复制到粘贴板的需求,在这里做一个简单的例子分享给大家,没考虑兼容性,需要兼容的大家去查找下文档

//html
<p id="element">测试测试<p>
<botton onclick="copyText(ele)">点击复制</botton>

  

//js
function copyText(ele) {
  var element = document.querySelecter(ele);

   var selection = window.getSelection();   // 创建Selection 对象

     var range = document.createRange(); //创建Range 对象

range.selectNodeContents(element); //设定一个目标节点内容的 Range

selection.removeAllRanges();  //清空选择区域

selection.addRange(range);  //选中元素, 这一步可以实现全选

document.execCommand("copy"); //复制到粘贴板

     selection.removeAllRanges(); //选择完成之后清空选择

element.oncopy = function(e) { //监听 复制事件
                e.preventDefault();
                let copyMsg = window.getSelection() + '商业转载请注明出处。'; // window .getSelection() 表示选择的内容
                e.clipboardData.setData("Text", copyMsg); // 将复制信息添加到剪切板
         }

}

一个简单的选择,复制粘贴就实现啦

js实现选择及复制粘贴的更多相关文章

  1. slickgrid ( nsunleo-slickgrid ) 8 区域选择与复制粘贴

    区域选择 区域选择是通过插件CellRangeSelector实现的,默认不支持跨冻结列进行选择,修正了选择,支持跨冻结列,代码如下,通过判断选择的起点和终点所落在的冻结范围进行计算,如从左往右进行复 ...

  2. Eclipse编辑JS响应慢,复制粘贴卡顿的解决方案

    我使用的是官网标准版的eclipse4.3 for javaEE, 写JS时卡的简直无法忍受,尝试去掉所有的validate,包括菜单和项目属性中的都没作用. 整个人都急疯了~ 后来在项目根目录.pr ...

  3. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  4. 前端复制粘贴文字clipBoard.js的使用

    1. vue  中的复制粘贴: <div class="mainTextItem" @click="copyTXTOne" id="copyOn ...

  5. 【神器】vimum在浏览器中键盘操作选择、复制、粘贴,键盘党的最爱

    1.下载: http://files.cnblogs.com/files/quejuwen/vimum_extension_1_56.zip 2.开源:https://github.com/philc ...

  6. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS 禁止右键,禁止复制,禁止粘贴

    原文:JS 禁止右键,禁止复制,禁止粘贴 如何用用javascript 禁止右键,禁止复制,禁止粘贴,做站时常会用到这些代码,所以收藏了一下!1. oncontextmenu="window ...

  8. js 实现复制粘贴文本过滤(保留文字和图片)

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  9. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

随机推荐

  1. JS获取当前页面URL的方法

    1.JS获取当前页面URL的方法小结 ①. document.URL;                           http://localhost:81/Test/1.htm/id/12 ② ...

  2. HRBUST 1217 统计单词个数

    $dp$. 设$dp[i][j]$为到$i$位置,切成了$j$段的最大收益,然后枚举一下$f$,$dp[i][j]=max(dp[f][j-1]+v[f+1][i])$.一段区间的价值可以用区间$dp ...

  3. 洛谷P3975 跳房子 [DP,单调队列优化,二分答案]

    题目传送门 跳房子 题目描述 跳房子,也叫跳飞机,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一. 跳房子的游戏规则如下: 在地面上确定一个起点,然后在起点右侧画 n 个格子,这些格子都在同一 ...

  4. 循序渐进PYTHON3(十三) --7-- DJANGO之MODELS

    一.使用django连库建表 使用django连接数据库需要知道3个要点: 1.通过settings.py注册当前app:   2.通过settings.py配置连接某种类型的数据库:   3.通过m ...

  5. 【爬虫】python requests模拟登录知乎

    需求:模拟登录知乎,因为知乎首页需要登录才可以查看,所以想爬知乎上的内容首先需要登录,那么问题来了,怎么用python进行模拟登录以及会遇到哪些问题? 前期准备: 环境:ubuntu,python2. ...

  6. 子查询在DELETE语句中的应用

    子查询在DELETE 中唯一可以应用的位置就是WHERE 子句,使用子查询可以完成复杂的数据删除控制.其使用方式与SELECT 语句中的子查询基本相同,而且也可以使用相关子查询等高级的特性.下面的SQ ...

  7. Sd - JavaBase问题

    1. Java有哪些基本数据类型 2. Java基本数据类型和引用类型的区别 3. Java的多态 4. Override和Overload的区别 5. Java内部类 6. 继承和组合的比较 7. ...

  8. 内存分哪些区 C++,ios,java

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha 313134555@qq.com C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)—由编译器自动分配释放,存 ...

  9. BZOJ 4327 JSOI2012 玄武密码(后缀自动机)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4327 [题目大意] 求每个子串在母串中的最长匹配 [题解] 对母串建立后缀自动机,用每 ...

  10. [bzoj1011](HNOI2008)遥远的行星(近似运算)

    Description 直 线上N颗行星,X=i处有行星i,行星J受到行星I的作用力,当且仅当i<=AJ.此时J受到作用力的大小为 Fi->j=Mi*Mj/(j-i) 其中A为很小的常量, ...