clipboard.js无需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/article/73145.htm">
<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:

  • 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实现复制功能的示例代码

    最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制.在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现.因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好.下面简单介绍一下它的用法. 引入插件,可以下载,也可以使用第三方cdn. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></sc

  • Clipboard.js 无需Flash的JavaScript复制粘贴库

    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

  • 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中加上要复

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

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

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

  • 基于js与flash实现的网站flv视频播放插件代码

    本文实例讲述了基于js与flash实现的网站flv视频播放插件代码.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • JS统计Flash被网友点击过的代码

    JS怎样知道Flash广告条被网友点击过? 1.Flash广告条不是我做的,它的链接是写在里面的. 2.我想统计这个Flash被网友点击了多少次.它由三个JS组成,它是一个广告联盟网站,统计FLASH被点击的应用,可是我不会修改成我的应用,请大家帮看看,谢谢,我的点击统计是 count.asp 请问怎样写一个JS可以进行统计,谢谢 1.js -------------------------------- var ed_ads_Furl=top.window.location; var ed_a

  • JS实现FLASH幻灯片图片切换效果的方法

    本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • javascript文件中引用依赖的js文件的方法

    在一个js文件中如果需要引入另外所依赖的js文件,只需要在第一个js文件中导入如下代码即可: 复制代码 代码如下: var s=document.createElement("script"); s.src="/script/Map.js"; document.getElementsByTagName( "HEAD")[0].appendChild(s); 其中红色部分为所依赖的js文件的路径.

  • 效果直逼flash的Div+Css+Js菜单

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • js与flash的交互FLASH连播控制器

    该实例主要实现了js与flash的交互,运行前提是浏览器安装了flash插件! 前段时间领导提出的一个问题:能否实现多个flash的连续播放? 查了相关资料并通过自己的努力,最终实现了如下一个简单的Flash连续播放的js脚本. 该功能的实现实际上相当简单,主要是要了解js对flash控制的接口函数,知道了这些,问题的难度马上就降到了1+1=?的级别. 复制代码 代码如下: var flashs=[    "http://60.210.98.23/theater/flash/2007-07/14

  • JS文件中加载jquery.js的实例代码

    JS文件中加载jquery.js的实例代码

    本文表述了JS文件中加载jquery.js的方法,具有很好的参考价值,希望对大家有所帮助. 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文件的引入: 2.这个JS文件中 还要引入其他的JS文件: 3.所有JS功能都写在这个JS文件中 这些代码用到了jquery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js. 在网上搜索了很多方法都不太实用,由于我自己离开WEB多年 最后向朋友询问得到以下代码: 1.js // by firefoxmmx

  • require.js 加载 vue组件 r.js 合并压缩的实例

    require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

随机推荐