根据官方文档的说法这个支持IE9+以及大部分主流浏览器,地址:
https://clipboardjs.com/

下面写个简单的例子:
HTML:注意,这里最好是button,并非所有的元素都支持该JS

<button type="button" class="btn btn-default" id="btn_Share">
复制
</button>

JS:

 //这里以复制URL为例
var clipboard = new ClipboardJS('#btn_Share', {
text: function () {
var url = window.location.href;
return url;
}
}); clipboard.on('success', function (e) {
alert("链接复制成功");
}); clipboard.on('error', function (e) {
alert(e);
});

需要注意的是,官方强调了bootstrap的一个特殊情况
要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用,您需要将focus元素设置为container值。

new ClipboardJS('.btn', {
container: document.getElementById('modal')
});

ClipboardJS 实现JS复制到剪切板的更多相关文章

  1. [JavaScript] js 复制到剪切板

    zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroCli ...

  2. jquery.zclip.js复制到剪切板

    参考http://www.cnblogs.com/PeunZhang/p/3324727.html 需要引用jquery.zclip $("#id").zclip({ path: ...

  3. js 复制到剪切板

    function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $(' ...

  4. 复制到剪切板js代码(转)

    <script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...

  5. clipboard.js 实现动态获取内容并复制到剪切板

    使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...

  6. js 最简单的实现复制到剪切板 xl_copy

    使用 npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{     ...

  7. web复制到剪切板js

    web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...

  8. js-将文本复制到剪切板

    // 将文本复制到剪切板 var clipboard2 = new ClipboardJS('.add_wx_guide_float', { text: function(trigger) { ret ...

  9. jquery实现点击复制到剪切板

    1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...

随机推荐

  1. web_01Java ee实现登陆注册功能

    Web Web_01版本: 实现功能 用户注册 用户登录 设计内容 数据库:mysql 服务器: tomact7 配置 : xml 页面 : jsp+html/css *重点: 数据库相关: 数据库操 ...

  2. Principal Component Analysis(PCA)

    Principal Component Analysis(PCA) 概念 去中心化(零均值化): 将输入的特征减去特征的均值, 相当于特征进行了平移, \[x_j - \bar x_j\] 归一化(标 ...

  3. 深入理解JavaScript系列(38):设计模式之职责链模式

    介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象 ...

  4. 标准webservice调用

    现代定义的webservice一般都倾向于restfull风格的http请求,但工作中还是会遇到前辈们写的时代代码. 我们更倾向于封装代码来调用,而不是服务引用.请看: Service.asmx服务的 ...

  5. 多线程FTP下载日志脚本

    #!/bin/bash ip_list=`cat $1` thead_num=5tmp_fifofile="/tmp/$$.fifo"mkfifo "$tmp_fifof ...

  6. vue中echarts引入中国地图

    <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div& ...

  7. [转载]ZendStudio格式化html错位问题修正

    原文链接leeon.me ZendStudio提供的HTML编辑功能感觉很强大,有时候觉得比dw更加人性化,而且整合php在一个编辑器上编写前端会方便很多,以前每次通过zend格式化html代码都会奇 ...

  8. angularJS请求参数 ajax

    1. 使用angular服务请求 app.controller('main', function($scope, $http) { $scope.fun1 = function () { $http( ...

  9. 2017年11月26日 C#流&&窗体对话框

    C#流 在顶端加入using System.IO就可以使用流 StreamReder a = new StreamReder();//读取 前面什么都可以 = sr.ReadToEnd();//用法 ...

  10. java--集合框架总结1--set总结

    一.集合框架的概述. 基础的数据结构有数组,链表,栈,队列,二叉树等,java中的数据结构,利用了这些基本的数据结构分别实现了很丰富的集合框架类型,下面简单地总结下关于java集合框架的基础内容,在进 ...