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 ...
随机推荐
- 学习鸟哥的Linux私房菜笔记(8)——文件查找与文件管理2
四.压缩 gzip, gunzip Linux标准压缩工具 对文本文件可以达到75%的压缩率 compress, uncompress 旧的Unix压缩工具 bzip2, bunzip2 更新的Lin ...
- 项目流程管理&&架构总结
1 项目背景 所在业务在早期没有营销费用,买家购买商品的折扣优惠是由卖家提供的.全部订单的终于价格是由卖家和业务方确定的,整个购买流程非常easy. 如今此业务收受到公司重视,业务团队能申请到营销费用 ...
- 新一代Xamarin
新一代Xamarin竟然可以将.NET代码原生编译成:Jar包供Java原生调用.swift类库.obj-c类库.C++类库 供目标平台传统代码直接调用 之前和很多朋友聊到Xamarin觉得确实不错, ...
- Android Studio运行main方法
这样想做一些测试就很简单了 实现步骤如下: 1.当前项目右键->new->Module->Java Library 2.修改你创建javaLib的build.gradle文件 改为( ...
- 用Ruby实现的论坛灌水工具:CC98 Post Machine
介绍 ZJU 的校网论坛 CC98 比较活跃.论坛只对校内网开放,而且账号跟学生绑定,每个学生注册的账号数量有限.『十大』是 CC98 的经典页面:基于关注的人数(回帖的用户数而不是回帖的数量)用算法 ...
- Clustering Devices In An Internet Of Things
Clustering devices in an Internet of Things ('IoT'), including: receiving, by a device clustering mo ...
- XML DTD和XML Schema
CSDN原文.讲的很清楚.
- ElasticSearch的基本用法与集群搭建 good
一.简介 ElasticSearch和Solr都是基于Lucene的搜索引擎,不过ElasticSearch天生支持分布式,而Solr是4.0版本后的SolrCloud才是分布式版本,Solr的分布式 ...
- python实现简易采集爬虫
#!/usr/bin/python #-*-coding:utf-8-*- # 简易采集爬虫 # 1.采集Yahoo!Answers,parseData函数修改一下,可以采集任何网站 # 2.需要sq ...
- WinForm导出文件
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 ...