js实现复制内容到剪贴板
一、 原生js实现,电脑可以用,手机不可以用
1. 必须是 input元素 才可以使用
<input id="code" type="text" value="www">
<span class="copy-btn" v-on:click="copy">复制</span>
//获取input并执行选中
document.getElementById('code').select();
//执行documen的copy事件
document.execCommand('copy');
二、clipboard.js 实现,电脑、手机都可以用 https://github.com/zenorocha/clipboard.js
1. input、div 任何元素都可以使用
<span id="code">123456</span>
<span class="copy-btn" data-clipboard-target="#code" v-on:click="copy">复制</span>
let clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
//复制成功
console.log("复制成功");
//取消选中
e.clearSelection();
});
js实现复制内容到剪贴板的更多相关文章
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- js实现复制内容
一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function ...
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- redis 持久化 RDB
https://blog.csdn.net/u010028869/article/details/51792197
- MySql 时区错误
mysql的时区错误问题: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one ...
- 从Ubuntu 14.04 LTS版升级到Ubuntu 16.04 LTS
Ubuntu 16.04 (Xerial Xerus) Long Term Support版于最近发布了.要想了解它的新功能和新特性,就必须升级或安装这个新系统. 本文讲述怎样一步步从Ubuntu ...
- @Transient的应用
我今天分配的任务是为一个页面Debug,遇到了一个问题查询的实体类在数据库没有对应的表,这时最常用的是建立视图或者表,但是应用@Transient注释可以让你更简单,免除建立表还有视图需要找多表关联关 ...
- 网络通信框架之okHttp
主页: https://github.com/square/okhttp 特点: * 支持HTTP/2 和 SPDY * 默认支持 GZIP 降低传输内容的大小 * 支持网络请求的缓存 * 当网络出现 ...
- 爬虫 lxml 模块
Xpath 在 XML 文档中查找信息的语言, 同样适用于 HTML 辅助工具 Xpath Helper Chrome插件 快捷键 Ctrl + shift + x XML Quire xpath ...
- sql中对查询出的某个字段转换查询
<select id="queryCmonByLanId" parameterType="java.util.Map" resultType=" ...
- 美化Eclipse-背景
为了美化Eclipse,请登录主题网站http://www.eclipsecolorthemes.org/ 下载EPF配置文件(截图如下),并导入eclispe即可. 导入方法: (1)从File菜单 ...
- Python中将(字典,列表等)变量格式化成字符串输出
比如原始的List变量的值是这种: [{"]}] 而想要将其输出为带缩进的,树状的,很漂亮的效果,那么可以通过这样的方法: import json #demoDictList is the ...
- LoadRunner 技巧之 思考时间设置
LoadRunner 技巧之 思考时间设置 用户访问某个网站或软件,一般不会不停地做个各种操作,例如一次查询,用户需要时间查看查询的结果是否是自己想要的.例如一次订单提交,用户需要时间核对自己填写的信 ...