ClipboardJS 实现JS复制到剪切板
根据官方文档的说法这个支持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复制到剪切板的更多相关文章
- [JavaScript] js 复制到剪切板
zeroclipboard官网:https://github.com/zeroclipboard/ZeroClipboard 下载压缩包,得到两个“ZeroClipboard.js”和“ZeroCli ...
- jquery.zclip.js复制到剪切板
参考http://www.cnblogs.com/PeunZhang/p/3324727.html 需要引用jquery.zclip $("#id").zclip({ path: ...
- js 复制到剪切板
function copyTextToClipboard(text) { var copyFrom = $('<textarea/>'); copyFrom.text(text); $(' ...
- 复制到剪切板js代码(转)
<script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...
- clipboard.js 实现动态获取内容并复制到剪切板
使用clipboard.js分为以下几个步骤: 1.引入一个clipboard.js的文件: 2.新建一个clipboard对象: 3.点击按钮获取目标对象里面的内容,将其复制到剪切板. 注意:1.目 ...
- js 最简单的实现复制到剪切板 xl_copy
使用 npm install xl_copy // 项目中安装 import clipboard form 'xl_copy' // 引用 element.onclick = ()=>{ ...
- web复制到剪切板js
web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...
- js-将文本复制到剪切板
// 将文本复制到剪切板 var clipboard2 = new ClipboardJS('.add_wx_guide_float', { text: function(trigger) { ret ...
- jquery实现点击复制到剪切板
1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...
随机推荐
- 入门系列之在Nginx配置Gzip
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小铁匠米兰的v 发表于云+社区专栏 简介 网站加载的速度取决于浏览器必须下载的所有文件的大小.减少要传输的文件的大小可以使网站不仅加载 ...
- Win32 DPAPI加密编程
DPAPI函数是CryptoAPI中少有的简单易用的加密函数,调用过程简单,其调用接口几乎不涉及密码学概念.Win32 DPAPI有4个函数,它们分别是CryptProtectData.CryptUn ...
- TypeLoadException: Could not load type 'Microsoft.AspNetCore.Mvc.Internal.IHttpResponseStreamWriterFactory' from assembly 'Microsoft.AspNetCore.Mvc.Core, Version=2.1.2.0 ...
今天调试 asp.net core 2.0 项目时遇到了如下错误: TypeLoadException: Could not load type 'Microsoft.AspNetCore.Mvc.I ...
- Xcode日常使用
1.构建输出目录(Preferences->Locations->Locations)当选择为Default时,Derived Data的目录为~/Library/Developer/Xc ...
- mysql 优化常用语句
show status;//查询mysql各种状态: show variables like 'long_query_time';//慢查询的限定时间 set long_query_time=1;// ...
- python-入门教程(操作mysql数据库)
pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x,而MySQLdb不支持3.x版本. 本文测试python版本:3.6. ...
- 管理nginx(采用信号的方式)
启动:sbin/nginx 立即停止:sbin/nginx -s stop 平滑停止:sbin/nginx -s quit 重载配置:sbin/nginx -s reload(不会导致服务器关闭, 而 ...
- GIT学习笔记——第一章
git之vim编辑器退出命令 # 学习笔记 张文军微博主页 张文军码云主页 张文军新浪云主页 张文军博客主页 ## 刚学习git,好多东西没接触过,进入vim后不知道如何出来了,网上找了很多都 ...
- TCP基础知识(一)简介与数据包
TCP详解(1):简介与数据包 TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的.可靠的.基于字节流的传输层通信协议 应用层向TCP层发送用于网间传输 ...
- 使用maven搭建Spring MVC
在maven项目中搭建SpringMvc 1.pom文件 <span style="white-space:pre"> </span><propert ...