下面的方法可以完美实现:

  1. 复制指定input 或者 textarea中的内容;
  2. 指定非输入框元素中的内容

代码如下:

  1. function copyToClipboard(elem) {
  2. // create hidden text element, if it doesn't already exist
  3. var targetId = "_hiddenCopyText_";
  4. var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
  5. var origSelectionStart, origSelectionEnd;
  6. if (isInput) {
  7. // can just use the original source element for the selection and copy
  8. target = elem;
  9. origSelectionStart = elem.selectionStart;
  10. origSelectionEnd = elem.selectionEnd;
  11. } else {
  12. // must use a temporary form element for the selection and copy
  13. target = document.getElementById(targetId);
  14. if (!target) {
  15. var target = document.createElement("textarea");
  16. target.style.position = "absolute";
  17. target.style.left = "-9999px";
  18. target.style.top = "0";
  19. target.id = targetId;
  20. document.body.appendChild(target);
  21. }
  22. target.textContent = elem.textContent;
  23. }
  24. // select the content
  25. var currentFocus = document.activeElement;
  26. target.focus();
  27. target.setSelectionRange(0, target.value.length);
  28. // copy the selection
  29. var succeed;
  30. try {
  31. succeed = document.execCommand("copy");
  32. } catch(e) {
  33. succeed = false;
  34. }
  35. // restore original focus
  36. if (currentFocus && typeof currentFocus.focus === "function") {
  37. currentFocus.focus();
  38. }
  39. if (isInput) {
  40. // restore prior selection
  41. elem.setSelectionRange(origSelectionStart, origSelectionEnd);
  42. } else {
  43. // clear temporary content
  44. target.textContent = "";
  45. }
  46. return succeed;
  47. }
  48. //我们可以这样直接调用这个方法:
  49. //copyToClipboard(document.getElementById("name"));

代码来自:通过按钮直接把input或者textarea里的值复制到粘贴板里

纯js实现复制内容到剪切板的更多相关文章

  1. js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  2. Clipboard.js实现复制内容到剪切板

    <script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...

  3. JS禁止右键查看源码,禁止复制,复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  4. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  5. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

  6. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  7. 在多浏览器使用JS复制内容到剪切板,无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  8. js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  9. 原生js 复制内容到剪切板

    代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...

随机推荐

  1. 数据库-identifying 与non-identifying realtionship 区别

    MySQL Workbench 或者是 E-RWin等进行数据库建模时,通常会对数据表进行关联操作,即设置表与表之间的关系 1:1 1:n m:n,而它们具有 identifying realtion ...

  2. Django ORM之QuerySet方法大全

    ################################################################## # PUBLIC METHODS THAT ALTER ATTRI ...

  3. 宠物商城后台管理系统(springMVC+Mybatis+数据库)

    mysql数据库 create database swager; use swager; #类别 create table Category( id int primary key auto_incr ...

  4. 【洛谷P2296】[NOIP2014]寻找道路

    寻找道路 题目链接 这道题非常的水,按照题意, 先反向建边,从终点搜索,标记出可以到达终点的点 然后枚举一遍,判断出符合条件1的点 再从起点搜索一遍就可以了 #include<iostream& ...

  5. 轻量ORM-SqlRepoEx (四)INSERT、UPDATE、DELETE 语句

    *本文中所用类声明见上一篇博文<轻量ORM-SqlRepoEx (三)Select语句>中Customers类 一.增加记录 1.工厂一个实例仓储 var repository = Rep ...

  6. 带你解析Java类加载机制

      目录 Java类加载机制的七个阶段 加载 验证 准备(重点) 解析 初始化(重点) 使用 卸载 实战分析 方法论 树义有话说 在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如 ...

  7. SmallMQ发布

    最近一直学习,主要处理java的分布式,MQ,RPC,通信,数据库,缓存等方向. 一般现在的MQ都是企业级的,庞大,功能齐全.最主要是代码量大,对于我们这些小程序员而言,太大,修改困难,修复更加困难, ...

  8. 如何在match中使用正则表达式

    这是在实现搜索功能的时候遇到的一个问题,在搜索的场景中,会根据搜索框中输入的内容,匹配出包含搜索内容的部分.简单模拟还原使用场景: 首先定义一个遍历 value 用来接收输入的内容 var value ...

  9. ES6 语法学习总结

    第一节:什么是ES6?   ES6是什么?跟JavaScript有什么关系? JavaScrip由三部分组成:分别是ECMAScript,BOM和DOM. 1)由此看出,ECMAScript是Java ...

  10. 【PTA 天梯赛训练】电话聊天狂人(简单map)

    输入格式: 输入首先给出正整数N(≤10^5),为通话记录条数.随后N行,每行给出一条通话记录.简单起见,这里只列出拨出方和接收方的11位数字构成的手机号码,其中以空格分隔. 输出格式: 在一行中给出 ...