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 ...
随机推荐
- DOM对象属性
事件 onmouseover 鼠标以上事件 onmouseout 鼠标离开事件 onclock 鼠标点击事件 onfocus 获取焦点 onblur 失去焦点 oninput 输入事件 ...
- Centos 安装字体库 以及解决confluence 旧文档数据的乱码
首先,第一步我们需要执行以下的命令来安装字体管理工具: yum install -y fontconfig mkfontscale 然后我们到(Windows系统)“c:/windows/fonts ...
- HTML标签功能分类
按功能类别对HTML标签进行分类,源自HTML 参考手册 基础 标签 描述 <!DOCTYPE> 定义文档类型. html 定义 HTML 文档. title 定义文档的标题. body ...
- String.format保留小数位数
java保留小数--四舍五入--想保留几位就几位 String.format("%.nf",d);----表示保留N位!!!format("%.nf",doub ...
- 精讲JS逻辑运算符&&、||,位运算符|,&
1.JS中的||符号: 运算方法: 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值. 只要“||”前面为true,不管“||”后面是true还是fals ...
- vscode如何使用命令面板
vscode如何使用命令面板 方法/步骤 首先找到vscode. 进入,打开页面. 找到查看. 打开找到命令面板. 选择打开,可以看到命令. 下拉还有多个,以及快捷键. ...
- ReentrantLock源码探究1:非公平锁的获取和释放
1.AQS简单介绍 Sync是ReentrantLock的一个内部类,它继承了AbstractQueuedSynchronizer,即AQS,在CountDownLatch.FutureTask. ...
- SprintBoot日志
yml配置 #logging logging.file: "logs/app.log" logging: level: root: debug file: max-size: 10 ...
- [Java]用于将链表变成字符串并在元素之间插入分隔符的有用函数“String.join”
将链表变成字符串并在元素之间插入分隔符,这种动作最常见于组合sql文“select a,b,c from tb”这种场景scenario,其中a,b,c你是存贮在链表中的, 如果要加逗号要么在循环中识 ...
- [转]Cookie详解
从事 Web 开发已有近17个月:在学以致用的工作学习里,对于不怎么使用的部分,多少有些雾里探花的窘迫感-差不多是了解一二,然而又非真切的明晰:这就使得再用的时候,总要去再搜索一番:如此颇为难受,倒不 ...