十行原生代码,不引入任何 JS 库,目前大部分浏览器与移动平台都可兼容。

function copyToClipboard(value, callback) {
var textarea = document.createElement("textarea");
textarea.value = value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("Copy");
textarea.parentNode.removeChild(textarea);
if (typeof callback === "function") {
callback(value);
}
}
  • 参数 1 => 需要复制的值
  • 参数 2 => 回调函数
  • 回调函数 参数 1 => 被复制的值

  Demo 地址Demo 源码,如果有兼容问题欢迎评论告诉我!


2019年3月24日补充:

iOS 移动端不兼容!!!(好吧,很尴尬。)

JavaScript 十行原生代码实现复制内容到剪贴板的更多相关文章

  1. JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...

  2. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  3. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  4. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  5. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  6. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  7. Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined

    起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...

  8. unity探索者之复制内容到剪贴板

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/8417014.html unity中提供的TextEditor类,只能在window ...

  9. JavaScript 复制内容到剪贴板

    <html> <head> <title>Selector</title> <script language="javascript&q ...

随机推荐

  1. 在rails 中使用mysql 出现Mysql::Error: Incorrect string value: 的问题

    这是因为你在做数据库的操作中有非英文的问题,之后gem mysql2 处理中文必须要数据库也指定是utf-8 才比较好处理 解决的方法很简单,将数据库每张表都转化成utf-8即可,如果数据库没有什么重 ...

  2. oracle 找回被覆盖的存储过程

    登录到sys账户下 1.TO_TIMESTAMP('2014-05-04 14:33:00', 'YYYY-MM-DD HH24:MI:SS') 删除前的日期 2.owner 表空调 3.Name   ...

  3. node搭环境(三)之安装vue-devtools

    前面已经安装了bower gulp,马上要学vue了,今天安装vue及调试神器vue-devtools 安装步骤: 1.在GitHub上输入 github.com/vuejs/vue-devtool后 ...

  4. 在CentOS上配置MySQL服务

    #!/bin/sh # Copyright Abandoned 1996 TCX DataKonsult AB & Monty Program KB & Detron HB # Thi ...

  5. sharepoint国内网站一览表(转发)

    中国石油化工集团公司http://www.sinopecgroup.com/Pages/index.aspx () 中国南方航空http://group.csair.com/_layouts/grou ...

  6. Azure 7 月新公布

    Azure 7月新发布:Cosmos DB,事件中心捕捉功能,Hybrid Connections,流量管理器快速故障转移功能. 您现有的 DocumentDB 资源现已作为 Azure 门户上 Az ...

  7. TP5.1:将外部资源引入到框架中(css/js/font文件)

    为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...

  8. 出现Permission denied的解决办法

    出处 https://blog.csdn.net/qq_16525279/article/details/80245350 提示 Permission denied 解决的办法: $ sudo chm ...

  9. 非常全面的PHP header函数设置HTTP头的示例

    突然看到这个,觉得很好,就拿过来了,如下: //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Conten ...

  10. Association, Composition and Aggregation in UI5, CRM, S/4HANA and C4C

    UI5 UI5使用Association和Aggregation描述控件之间的关系. Aggregation:parent和子控件在lifecycle上存在依赖关系: When a ManagedOb ...