目前只是对文字的复制。

下面的代码解释:

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在剪切中的使用的更多相关文章

  1. Vue使用Clipboard.JS在h5页面中复制内容

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...

  2. js实现剪切、复制、粘贴——clipBoard.js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  3. 前端技术之:如何在Vue中使用clipboard.js复制服务端数据

    第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...

  4. clipboard.js 介绍

    这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/zenorocha/clipboar ...

  5. 前端复制粘贴clipBoard.js的使用

    <!DOCTYPE html> <html> <head> <title>ClipBoard.js使用:修改HTML</title> < ...

  6. clipboard.js实现复制功能

    项目地址:https://github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb. 为什么使用它 复制文字到剪 ...

  7. js实现点击复制网页内容(基于clipboard.js)

    浏览网页过程中会遇到点击复制链接地址的情况,下面就介绍一种实现方法,该方法是基于clipboard.js: 官网地址:https://clipboardjs.com/: clipboard.js使用比 ...

  8. 解决clipboard.js在移动端复制失败的问题

    1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是 ...

  9. 前端复制粘贴文字clipBoard.js的使用

    1. vue  中的复制粘贴: <div class="mainTextItem" @click="copyTXTOne" id="copyOn ...

随机推荐

  1. Browser security standards via access control

    A computing system is operable to contain a security module within an operating system. This securit ...

  2. hive 日志配置/表头配置

    1.日志配置,拷贝hive/conf下的hive-log4j2.properties.template为hive-log4j2.properties,修改日志目录,接下来在创建hive/logs,目录 ...

  3. 【心情】2016ICPC青岛站打铁记

    Day0 下午到的青岛; 然后就在下面这两个地方转了很久:一直找不到公交站台 路上还看到了一个类似堡垒的东西:感觉屌屌的. 然后在落日的余晖下:我们找到了公交站台; 路上不知道他们在讨论什么:GPS什 ...

  4. expdp备份速度慢的问题

    --出口分析 --两个时间报表分析,该声明仅出口4,059,292  数据,10之后分钟数据没有继续出口              Snap Id  Snap Time  Sessions  Curs ...

  5. vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码

    主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer this.$http.get(this.api.export, { params: this.info, ...

  6. windows 下 TensorFlow(GPU 版)的安装

    windows 10 64bit下安装Tensorflow+Keras+VS2015+CUDA8.0 GPU加速 0. 环境 OS:Windows 10,64 bit: 显卡:NVIDIA GeFor ...

  7. 将grub写入mbr

    现在习惯了开机启动的方法,所以我们把grub重新安装到硬盘的MBR上面. 这个步骤也有两种方法,一是安装grub4dos,然后启动,选中搜索硬盘上的linux引导文件,进入Linux之后再安装grub ...

  8. Delphi 禁用x64位系统文件重定向功能

    在X64系统里面,一些特殊的目录和特殊的注册表键被分为2个独立的部分.对于文件系统来说,      %systemroot%\system32 目录被保留给64位文件使用,而32位文件会被重定向到%s ...

  9. delphi xe 之路(14)使用FireMonkeyStyle(一共30篇)

    FireMonkey使用Style来控制控件的显示方式. 每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Styl ...

  10. ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程-约定 因为 ASP.NET Core 是可以跨平台的 ...