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 ...
随机推荐
- 第六天-css基础(css定位)
css定位 方位名称: left right top bottom position:absolute 绝对定位(脱离标准流 div{ width:100px; height:100p ...
- QTableWidget懒加载(动态加载)实现
在QTableWidget中加入一行行的数据,如果数据数量过多,滚动起来就会卡顿,插入数据时也会影响性能,为了解决这个问题,采用懒加载的方式,只在界面上显示10几条数据,填满界面.同时增加而外的竖直滚 ...
- zookeeper系列(一)zookeeper图形化的客户端工具
追加一个zookeeper图形化的客户端工具: 1.zookeeper图像化客户端工具的下载地址:https://issues.apache.org/jira/secure/attachment/12 ...
- zookeeper系列(八)zookeeper客户端的底层详解
作者:leesf 掌控之中,才会成功:掌控之外,注定失败.出处:http://www.cnblogs.com/leesf456/p/6098255.html 尊重原创,共同学习进步: 一.前言 ...
- 撩测试MM神器cypress使用入门
不很久不很久以前 据说某家公司有两位前端,天天撸bug,为啥嘞?只怪测试MM倾人国,轻语哥哥有bug.✧(๑•̀ㅂ•́)و✧ 可是最近两位有点犯愁 Σ(っ °Д °;)っ.测试MM有几次提了紧急bug ...
- C++入门经典-例9.5-为具体类型的参数提供默认值
1:默认模板参数是指类模板中由默认的数据类型作为参数的参数,在模板定义时,还可以为默认的数据类型声明,变量,并为变量赋值.代码如下: // 9.5.cpp : 定义控制台应用程序的入口点. #incl ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- Java-内存模型 final 和 volatile 的内存语义
前提:内存屏障 内存屏障(Memory Barrier)与内存栅栏(Memory Fence)是同一个概念. 用于阻止指令重排序.保证了特定操作的执行顺序和某些变量的内存可见性. JMM 内存屏障分为 ...
- 3709: [PA2014]Bohater
3709: [PA2014]Bohater 或者:Bohater 题解 好狠啊这个题 z 要开 long long ,可能算掉血回血的时候会爆 long long 吧 首先把能回血的怪打死(不然你后面 ...
- leetcode 207课程表
class Solution { public: bool canFinish(int numCourses, vector<vector<int>>& prerequ ...