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.测试

剪切成功,被复制的文本状态如下图所示。

时间: 2024-10-13 12:13:45

clipboard.js在剪切中的使用的相关文章

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

摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() {

clipboard.js在弹出框中无法复制的问题

前几天发现了个bug,在jquery-ui的弹出框(dialog)中,使用clipboard.js实现的复制功能,竟然不会生效,后面查了下相关资料,发现不止jquery-ui的dialog不行,其他的模态框,例如bootstrap的,也是一样不会生效的.原因就是弹出框会自动focus,而复制的底层实现是要获取选中的内容,失去焦点后就无法获取到了,从而导致复制失败. 解决办法: 1)对于 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用,你会希望将获得焦点的元素设置

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

安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard"; 原文地址:https://www.cnblogs.com/cowboybusy/p/11452930.html

使用clipboard.js复制页面内容到剪切板

最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d

Clipboard.js : 移动端浏览器实现网页内容复制

.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size: 1em } .bottom-line { border-bottom: 2px solid #009a61; padding-bottom: 8px } 最近在项目中遇到这样一个需求: 点击按钮,将指定的URL复制到剪贴板,然后用户可以粘贴到浏览器(Safari为主)自行打开. 方案一:zero

Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js. 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示repo的HTTPS克隆地址,当你点击紧挨着这个部件的按钮时,就会复制当前repo的URL到用户的剪贴板中.Github用JavaScript库ZeroClipboard来实现这一功能,问题是这个库是用一个不可见的Flash来完成剪贴操作,而Flash技术正被各大浏览器厂商冷落,所以势必要有一个新的方案.

js 禁止剪切、复制、粘贴的文本框代码

有的网站中不允许用户复制.粘贴.剪切文本框中的内容的,是怎么实现的呢?看看下面的代码就知道了. <input id=”username” oncut=”return false” oncopy=”return false” oncontextmenu=”return false” onpaste=”return false” name=”username” value=”zzsky” type=”text” /> js 禁止剪切.复制.粘贴的文本框代码

clipboard.js存在的问题

clipboard.js  是一个复制到剪贴板的库. github:https://github.com/zenorocha/clipboard.js 兼容性:IE9一下不支持. 再做微信端的项目接到了一个需求.点击按钮把指定的内容复制到剪贴板中. 刚开始用的是:document.execCommand("Copy"); 大部分的属性只有IE支持.比如:贴贴. 想了想我只用复制而且用的是微信端.只要安卓和苹果支持能够使用就可以了. <input type="text&q