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 ...
随机推荐
- JAVA异常及其异常处理方式
异常处理 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的.比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 java.lang.Error:如果你用Syste ...
- 部分和问题(dfs)
部分和问题 描述 给定整数a1.a2........an,判断是否可以从中选出若干数,使它们的和恰好为K. 输入 首先,n和k,n表示数的个数,k表示数的和.接着一行n个数.(1<=n<= ...
- linux rpm包管理 yum管理
1. 软件包的管理 RPM的定义:RPM就是Red Hat Package Manger(红帽软件包管理工具)的缩写. RPM包不需要编译,本身就是二进制,而源码包需要先编译成系统识别的二进制文件,才 ...
- JVM 监控工具——jstack
[参考文章]:jstack 命令使用经验总结 1. 简介 jstack主要用于生成java虚拟机当前时刻的线程快照. 线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合, 主要目的是定位 ...
- 邻居子系统 之 邻居项创建__neigh_create
概述 IP层输出数据包会根据路由的下一跳查询邻居项,如果不存在则会调用__neigh_create创建邻居项,然后调用邻居项的output函数进行输出: __neigh_create完成邻居项的创建, ...
- jupyter notebook + MobaXterm Linux端远程部署
$jupyter notebook --generate-config $python In []: from notebook.auth import passwd In []: passwd() ...
- Nginx优化防爬虫 限制http请求方法 CDN网页加速 架构优化 监牢模式 控制并发量以及客户端请求速率
Nginx防爬虫优化 Robots协议(也称为爬虫协议,机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...
- java.lang.Double[] 转 double[]
Double[] v = list.stream().map(item -> item.getRespTime()).toArray(Double[]::new); Mean mean = ne ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- 【HANA系列】SAP HANA SQL获取某字符串的位置
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL获取某字 ...