不依赖Flash和任何JS库实现文本复制与剪切附源码下载

效果图如下：

我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。

查看演示 下载源码

HTML

首先加载本地clipboard.js文件。

代码如下:

<script src="clipboard.min.js"></script>

然后就是在body中加上要复制或剪切的文本域内容以及按钮。

代码如下:

<input id="foo" value="http://www.jb51.net/demo/clipboard/">
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button>

这里，我们使用了HTML5的data-属性，用来定位复制对象目标，它指向了文本域#foo，说明复制的是#foo中的value内容，aria-label属性定义了复制成功后的信息，用来提示复制结果信息。

还有个属性data-clipboard-action，它定义当前操作是复制还是剪切，默认是复制，当data-clipboard-action="cut"，这时，点击按钮将会剪切文本，跟WORD操作一样。当然，剪切操作仅适用于text和textarea。

我们也可以不需要input和textarea等元素内容作为复制对象，我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上，点击按钮就可以复制到ata-clipboard-text对应的内容。

代码如下:

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button>

Javascript

将以下一句代码加入到</body>前的<script>里，保存打开浏览，点击按钮即可复制。

new Clipboard('.btn');

当然我们可以再进一步处理，比如当复制完成后，提示复制成功信息更友好些，只要执行以下代码即可：

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
 var msg = e.trigger.getAttribute('aria-label');
 alert(msg);
 e.clearSelection();
});

以上内容就是小编跟大家分享的不依赖Flash和任何JS库实现文本复制与剪切附源码下载，希望大家喜欢。

赞 (0)

相关推荐

  • JS基于clipBoard.js插件实现剪切、复制、粘贴

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

  • JS复制内容到剪切板的实例代码(兼容IE与火狐)

    复制代码 代码如下: <mce:script type="text/javascript"><!--function copyToClipboard(meintext){    //ie    if (window.clipboardData){        window.clipboardData.setData("Text", meintext);    }    else if (window.netscape)    {        t

  • JS将制定内容复制到剪切板示例代码

    复制代码 代码如下: function copyText() { //复制内容 var txt = document.getElementById("table2").rows[1].cells[0].innerHTML; //去除空格 txt = txt.replace(/ /," "); //去除换行 txt = txt.replace(/<BR><BR>/," "); if (window.clipboardData

  • 简单实现兼容各大浏览器的js复制内容到剪切板

    简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.setData,只能支持IE和火狐.360浏览器.搜狗等浏览器,都泪崩.所以,研究了ZeroClipboard,尽量使用js代码写. 使用前先引用三个东西(没有提供上传附件,这里就不提供下载地址了,很常见,大家自己找度娘吧): jquery-1.4.1.min.js    ZeroClipboard.js

  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 运行效果图: HTML 首先加载本地clipboard.js文件. <script src="clipboard.min.js"></script> 然后就是在body中加上要复

  • JavaScript实现复制或剪切内容到剪贴板功能的方法

    项目中需要实现一个点击按钮复制链接的功能,网上看到的几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,能不能通过JS来实现复制剪切呢,今天分享一个兼容IE7浏览器复制的插件给大家,支持使用javascript实现复制.剪切和粘贴. 方法. 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() { }, copy: functio

  • js复制到剪切板的实例方法

    复制代码 代码如下: <script type="text/javascript" language="javascript">         //复制到剪切板js代码         function copyToClipBoard(s) {             //alert(s);             if (window.clipboardData) {                 window.clipboardData.setD

  • 不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    不依赖Flash和任何JS库实现文本复制与剪切附源码下载

    效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri

  • JS库particles.js创建超炫背景粒子插件(附源码下载)

    JS库particles.js创建超炫背景粒子插件(附源码下载)

    插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果             源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • 基于JS快速实现导航下拉菜单动画效果附源码下载

    基于JS快速实现导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

  • JS实现快速的导航下拉菜单动画效果附源码下载

    JS实现快速的导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

  • Phaser.js实现简单的跑酷游戏附源码下载

    采用的物理引擎是Phaser.js 官网地址:http://phaser.io/ 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 var config = { type: Phaser.AUTO, width: 800, height: 400, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug:

  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 效果演示      源码下载 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"&

  • Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例 源码 <!DOCTYPE html> <html lang="en"> <head&g

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

随机推荐