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

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

代码如下:

function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length); // copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
} if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
} //我们可以这样直接调用这个方法: //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. ZT在谷歌上班感受如何?

    在谷歌上班感受如何? 2013-11-05 作者:腾讯科技 出处: 互联网 责编:zlu     在谷歌这家全球最大最有抱负的技术公司工作将是怎样的情景呢?是天堂般的享受,还是地狱般的折磨呢?下面看一 ...

  2. 牛客网数据库SQL实战1-查找最晚入职员工的所有信息

    题目描述 查找最晚入职员工的所有信息CREATE TABLE `employees` (`emp_no` int(11) NOT NULL,`birth_date` date NOT NULL,`fi ...

  3. python入门13 集合set

    set集合与数学中的集合同一个概念,是无序不重复元素组成的. #coding:utf-8 #/usr/bin/python """ 2018-11-10 dinghanh ...

  4. Uva 11294 婚姻

    题目链接:https://vjudge.net/contest/166461#problem/C 题意: n对夫妻,有m对人吵过架,不能排在同一边,求新娘的一边的人: 分析: 每对夫妻,看成两个点,女 ...

  5. [USACO17FEB]Why Did the Cow Cross the Road II P

    嘟嘟嘟 考虑dp. 对于ai,和他能匹配的bj只有9个,所以我们考虑从这9个状态转移. 对于ai 能匹配的一个bj,当前最大的匹配数一定是[1, j - 1]中的最大匹配数 + 1.然后用树状数组维护 ...

  6. [18/11/22] 将点分十进制的IP地址化成二进制输出

    #include <stdio.h> void binary(int d){ ,j,n,b[]={}; ){ n=d%; d=d/; b[i++]=n; //不停的除2,余数保存在b[8] ...

  7. DisparityCostVolumeEstimator.cpp

    #include "DisparityCostVolumeEstimator.hpp" #include "DisparityCostVolume.hpp" # ...

  8. JAVA 线程状态转换图示及说明

    线程状态类型 新建状态(New):新创建了一个线程对象. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运行,等待获取C ...

  9. 理解Storm可靠性消息

    看过一些别人写的, 感觉有些东西没太说清楚,个人主要以源代码跟踪,参考个人理解讲述,有错误请指正. 1基本名词 1.1 Tuple: 消息传递的基本单位.很多文章中介绍都是这么说的, 个人觉得应该更详 ...

  10. 对象的比较与排序(三):实现IComparable<T>和IComparer<T>泛型接口

    来源:http://www.cnblogs.com/eagle1986/archive/2011/12/06/2278531.html 1:比较和排序的概念 比较:两个实体类之间按>,=,< ...