clipboard.js在剪切中的使用
目前只是对文字的复制。
下面的代码解释:
1.html
需要添加data-clipboard="copy"和data-clipboard-target="对象选择器"的属性。
其中data-clipboard-target表示复制的目标,用选择的形式表示,包括类选择器,id选择器,元素选择器等。
<section> <p id="qq1">123456789</p>
<input type="button" class="copy1" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq1" value="复制" />
<p>农村淘宝商家合作群:</p>
<p id="qq2">12345678900</p>
<input type="button" class="copy2" style="background-color:#e1cbcb;color:red;" data-clipboard-action="copy" data-clipboard-target="#qq2" value="复制" />
</section>
2.javascript
a.需要引入clipboard.js,代码路径视自己的项目而定。
b.实例化Clipboard,需要传入按钮的选择器,即通过什么动作实现剪切。
c.可以注册剪切成功和失败的事件,形式为clipboard.on("success 或者error",function(e) {});
<script src="Scripts/clipboard.min.js"></script>
<script>
$(function () {
var clipboard1 = new Clipboard(".copy1");
//clipboard1.on('success', function (e) {
// alert();
//}); //clipboard1.on('error', function (e) {
// console.log(e);
//}); }); </script>
3.测试
剪切成功,被复制的文本状态如下图所示。
clipboard.js在剪切中的使用的更多相关文章
- Vue使用Clipboard.JS在h5页面中复制内容
安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...
- js实现剪切、复制、粘贴——clipBoard.js
摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...
- 前端技术之:如何在Vue中使用clipboard.js复制服务端数据
第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...
- clipboard.js 介绍
这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/zenorocha/clipboar ...
- 前端复制粘贴clipBoard.js的使用
<!DOCTYPE html> <html> <head> <title>ClipBoard.js使用:修改HTML</title> < ...
- clipboard.js实现复制功能
项目地址:https://github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb. 为什么使用它 复制文字到剪 ...
- js实现点击复制网页内容(基于clipboard.js)
浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...
- 解决clipboard.js在移动端复制失败的问题
1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...
- 前端复制粘贴文字clipBoard.js的使用
1. vue 中的复制粘贴: <div class="mainTextItem" @click="copyTXTOne" id="copyOn ...
随机推荐
- Browser security standards via access control
A computing system is operable to contain a security module within an operating system. This securit ...
- hive 日志配置/表头配置
1.日志配置,拷贝hive/conf下的hive-log4j2.properties.template为hive-log4j2.properties,修改日志目录,接下来在创建hive/logs,目录 ...
- 【心情】2016ICPC青岛站打铁记
Day0 下午到的青岛; 然后就在下面这两个地方转了很久:一直找不到公交站台 路上还看到了一个类似堡垒的东西:感觉屌屌的. 然后在落日的余晖下:我们找到了公交站台; 路上不知道他们在讨论什么:GPS什 ...
- expdp备份速度慢的问题
--出口分析 --两个时间报表分析,该声明仅出口4,059,292 数据,10之后分钟数据没有继续出口 Snap Id Snap Time Sessions Curs ...
- vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码
主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer this.$http.get(this.api.export, { params: this.info, ...
- windows 下 TensorFlow(GPU 版)的安装
windows 10 64bit下安装Tensorflow+Keras+VS2015+CUDA8.0 GPU加速 0. 环境 OS:Windows 10,64 bit: 显卡:NVIDIA GeFor ...
- 将grub写入mbr
现在习惯了开机启动的方法,所以我们把grub重新安装到硬盘的MBR上面. 这个步骤也有两种方法,一是安装grub4dos,然后启动,选中搜索硬盘上的linux引导文件,进入Linux之后再安装grub ...
- Delphi 禁用x64位系统文件重定向功能
在X64系统里面,一些特殊的目录和特殊的注册表键被分为2个独立的部分.对于文件系统来说, %systemroot%\system32 目录被保留给64位文件使用,而32位文件会被重定向到%s ...
- delphi xe 之路(14)使用FireMonkeyStyle(一共30篇)
FireMonkey使用Style来控制控件的显示方式. 每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Styl ...
- ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程-约定 因为 ASP.NET Core 是可以跨平台的 ...