目前只是对文字的复制。

下面的代码解释:

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. 学习鸟哥的Linux私房菜笔记(8)——文件查找与文件管理2

    四.压缩 gzip, gunzip Linux标准压缩工具 对文本文件可以达到75%的压缩率 compress, uncompress 旧的Unix压缩工具 bzip2, bunzip2 更新的Lin ...

  2. 项目流程管理&amp;&amp;架构总结

    1 项目背景 所在业务在早期没有营销费用,买家购买商品的折扣优惠是由卖家提供的.全部订单的终于价格是由卖家和业务方确定的,整个购买流程非常easy. 如今此业务收受到公司重视,业务团队能申请到营销费用 ...

  3. 新一代Xamarin

    新一代Xamarin竟然可以将.NET代码原生编译成:Jar包供Java原生调用.swift类库.obj-c类库.C++类库 供目标平台传统代码直接调用 之前和很多朋友聊到Xamarin觉得确实不错, ...

  4. Android Studio运行main方法

    这样想做一些测试就很简单了 实现步骤如下: 1.当前项目右键->new->Module->Java Library 2.修改你创建javaLib的build.gradle文件 改为( ...

  5. 用Ruby实现的论坛灌水工具:CC98 Post Machine

    介绍 ZJU 的校网论坛 CC98 比较活跃.论坛只对校内网开放,而且账号跟学生绑定,每个学生注册的账号数量有限.『十大』是 CC98 的经典页面:基于关注的人数(回帖的用户数而不是回帖的数量)用算法 ...

  6. Clustering Devices In An Internet Of Things

    Clustering devices in an Internet of Things ('IoT'), including: receiving, by a device clustering mo ...

  7. XML DTD和XML Schema

    CSDN原文.讲的很清楚.

  8. ElasticSearch的基本用法与集群搭建 good

    一.简介 ElasticSearch和Solr都是基于Lucene的搜索引擎,不过ElasticSearch天生支持分布式,而Solr是4.0版本后的SolrCloud才是分布式版本,Solr的分布式 ...

  9. python实现简易采集爬虫

    #!/usr/bin/python #-*-coding:utf-8-*- # 简易采集爬虫 # 1.采集Yahoo!Answers,parseData函数修改一下,可以采集任何网站 # 2.需要sq ...

  10. WinForm导出文件

    1 using System;  2 using System.Collections.Generic;  3 using System.Linq;  4 using System.Text;  5 ...