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 ...
随机推荐
- 【黑马Javaweb】1.1Junit单元测试
黑马第一天学习 今日内容 Junit单元测试: 测试分类: Junit使用:白盒测试 今日内容 1.1Junit单元测试 1.2.反射 1.3.注解 Junit单元测试: 测试分类: 1.黑盒测试:不 ...
- linux出现Redirecting to /bin/systemctl start mysqld.service,解决方法
上去就是一个命令 /bin/systemctl start httpd.service
- UDP打洞原理介绍
NAT穿越模块的设计与实现 Internet的快速发展以及IPv4地址数量的不足使得NAT设备得到了大规模的应用,然而这也给越来越多的端到端通信也带来了不少的麻烦.一般来说,NAT设备允许内网内主机 ...
- ubuntu14.04 安装apache+php7.2*
1.安装apache2 sudo apt-get update sudo apt-get install apache2 这时http://你机器的ip,就可以访问了 2.安装php7.0+及一些必要 ...
- Python——GUI编程 控件及常用信号
QSlider类中的常用信号 valueChanged: 当滑块位置发生改变时触发此信号 sliderPressed: 当用户按下滑块时触发此信号 sliderMoved: 当用户拖动滑块时触发此信号 ...
- k8s开启cadvisor http 服务
k8s开启cadvisor http 服务 cadvisor介绍: Google的 cAdvisor 是另一个知名的开源容器监控工具. 只需在宿主机上部署cAdvisor容器,用户就可通过Web界面或 ...
- python中复制文件
1.复制单个文件 1.把home下的test.yml复制到root目录下 In [43]: import shutil In [42]: shutil.copy('/home/test.yml','/ ...
- C基础知识(10):预处理器
C预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理. 所有的预处理器命令都是以井号(#)开 ...
- 一步一步搭建:spark之Standalone模式+zookeeper之HA机制
理论参考:http://www.cnblogs.com/hseagle/p/3673147.html 基于3台主机搭建:以下仅是操作步骤,原理网上自查 :1. 增加ip和hostname的对应关系,跨 ...
- 06 vue router(一)
一.vue route是什么? Vue Router是vue.js官方的路由管理器.主要有以下几种功能 1.路由和视图表的配置.(已明白) 2.模块化和基于组件的路由配置.(已明白) 3.路由参数.查 ...