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 ...
随机推荐
- postgres的数据库备份和恢复
备份和恢复 一条命令就可以解决很简单: 这是备份的命令: pg_dump -h 127/0.0.1 -U postgres databasename > databasename.bak 指令解 ...
- win10专业版安装docker实战
在win10专业版上安装docker 一,下载Docker for Windows Installer.exe 二,在程序面板---程序----程序和功能中找到启动或关闭windows功能,将hype ...
- 踩坑:VScode 集成 eslint 插件
本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目 注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...
- koa 基础(二十)nodejs 操作mongodb数据库 --- 新增数据
1.app.js /** * nodejs 操作mongodb数据库 * 1.安装 操作mongodb * cnpm install mongodb --save * 2.引入 mongodb 下面的 ...
- Spring Boot Cli下载安装
本地下载地址: spring-boot-cli-2.1.8.RELEASE-bin.zip : https://pan.baidu.com/s/1GMyxj1PecsM4BG_hzoteVQ spr ...
- C# 防火墙操作之开启与关闭
通过代码操作防火墙的方式有两种:一是代码操作修改注册表启用或关闭防火墙:二是直接操作防火墙对象来启用或关闭防火墙.不论哪一种方式,都需要使用管理员权限,所以操作前需要判断程序是否具有管理员权限. 1. ...
- java初级之数组详解
一,数组的概念: 数组是为了存储同一种数据多个元素的集合,也可以看成是一个容器,数组既可以存储基本数据类型,也可以存储引用数据类型,数组是为了存储同种数据类型的多个值. 1.1.1,一维数组重点: 数 ...
- 七十九:flask.Restful之flask-Restful蓝图与渲染模板
1.flask-Restful与蓝图结合使用如果要在蓝图中使用flask-Restful,那么在创建Api对象的时候,就不应该使用app,而是蓝图,如果有多个蓝图,则需在每一个蓝图里面创建一个Api对 ...
- java的几种上传文件方法
这时:commonsmultipartresolver 的源码,可以研究一下 http://www.verysource.com/code/2337329_1/commonsmultipartreso ...
- Jmeter接口测试图文示例
Jmeter接口测试图文示例 以getObjectByCode接口为例,用jmeter2.13来进行接口测试. 测试前准备: 测试工具及版本:jmeter 2.13 r1665067(须包含__MD5 ...