JS基于clipBoard.js插件实现剪切、复制、粘贴
摘要:
最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢?
地址:https://github.com/baixuexiyang/clipBoard.js
方法:
复制
var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() { }, copy: function() { return document.getElementById('data').value; }, afterCopy: function() { } });
剪切
var cut = new clipBoard(document.getElementById('data'), { beforeCut: function() { }, Cut: function() { return document.getElementById('data').value; }, afterCut: function() { } });
粘贴
var paste = new clipBoard(document.getElementById('data'), { beforePaste: function() { }, paste: function() { return document.getElementById('data').value; }, afterPaste: function() { } });
相关推荐
-
使用clipboard.js实现复制功能的示例代码
最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制.在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现.因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好.下面简单介绍一下它的用法. 引入插件,可以下载,也可以使用第三方cdn. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></sc
-
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 运行效果图: HTML 首先加载本地clipboard.js文件. <script src="clipboard.min.js"></script> 然后就是在body中加上要复
-
ZeroClipboard.js使用一个flash复制多个文本框
ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件,目前官方已经到2.x的版本了,但不支持IE9以下的浏览器,而如果要兼容,则可以使用1.x的版本,我使用的是最开始的一个版本:1.0.7的.该版本支持IE7和IE8,今天主要介绍如何使用一个flash支持多个复制文本. 一般我们需要复制一个地方的时候,大多都使用下面这个代码新建一个对象: <div id="J_pop_share"> <input id="J_video_ifram
-
Clipboard.js 无需Flash的JavaScript复制粘贴库
clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 41+.IE 9+.Opera 29+ 官方网站:https://github.com/zenorocha/clipboard.js 软件下载:http://www.jb51.net/jiaoben/385604.html 官方使用方法:https://zenorocha.github.io/clipbo
-
JS基于clipBoard.js插件实现剪切、复制、粘贴
摘要: 最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy:
-
JS基于FileSaver.js插件实现文件保存功能示例 原创
本文实例讲述了JS基于FileSaver.js插件实现文件保存功能.分享给大家供大家参考,具体如下: 这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码: 复制代码 代码如下: /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs=saveAs||function(e){"use strict";if(typeof naviga
-
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr
-
js基于FileSaver.js 浏览器导出Excel文件的示例
本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes
-
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
复制代码 代码如下: $("#div").bindTemplate({ source : json object, template : null | $("#template") | "<div>{{object}}</div>", dateFormat : "d.m.y", tagOpen : "{{", tagClose : "}}" }); bindTem
-
JS input文本框禁用右键和复制粘贴功能的代码
复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume
-
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
主要从两个方面入手了: 1.高亮显示/换行 2.复制代码按钮 这两方面都有现成的插件. 代码高亮插件--highlight.js 1.下载highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选常用语言,通常common就足够用了. 点击download,下载,解压,里面会有js文件和css文件. js文件决定哪些部分高亮,css决定代码颜色 2.在解压后的文件里找到一个highlight.pack.js文件,在使用时导入
-
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
本文实例讲述了JavaScript实现写入文件到本地的方法.分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的. IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题. 那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求.下
-
Vue中使用highlight.js实现代码高亮显示以及点击复制
目录 效果如下 第一步 安装highlight.js 第二步 在main.js中引入 第三步 创建组件 效果如图:点击显示代码 第四步: 使用组件 第五步 实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下 第一步 安装highlight.js yarn add highlight.js 第二步 在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件
随机推荐
- javascript常见用法总结
- ExtJS Window 最小化的一种方法
- JS实现元素上下左右移动效果
- jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
- JavaScript实现类似淘宝的购物车效果
- PHP传参之传值与传址的区别
- PHP文件操作详解
- 使用php+Ajax实现唯一校验实现代码[简单应用]
- 微信小程序支付之c#后台实现方法
- C++ 自定义栈实现迷宫求解
- Python 登录网站详解及实例
- Jquery跳到页面指定位置的方法
- 发老兵及海洋VBS解包工具代码
- Android消息循环机制源码深入理解
- JS利用cookies设置每隔24小时弹出框
- js时间戳和c#时间戳互转方法(推荐)
- 图片按比例缩放函数
- IIS支持exe文件下载的配置方法
- 采用C++实现区间图着色问题(贪心算法)实例详解
- Bootstrap 3.x打印预览背景色与文字显示异常的解决