xml地图|网站地图|网站标签 [设为首页] [加入收藏]

现代方式实现复制文本到剪贴板,JavaScript实现复

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:56 发布时间:2019-11-21
摘要:【】Clipboard.js – 现代方式落到实处复制文本到剪贴板,clipboard.js剪贴板 复制文本到剪贴板应该并简单,近些日子早就有很干练的 Flash 方法。可是Flash 已经在重重场子不适用了,非常是

【】Clipboard.js – 现代方式落到实处复制文本到剪贴板,clipboard.js剪贴板

  复制文本到剪贴板应该并简单,近些日子早就有很干练的 Flash 方法。可是Flash 已经在重重场子不适用了,非常是随着 HTML5 手艺的上进。明日援用的那个 Clipboard.js 库不相信任 Flash,正视于 Selection 和 execCommand API。execCommand 支持以下浏览器:Chrome浏览器42 ,火狐41 ,IE9 。

 

图片 1 

 

即时去查究

 

你或者感兴趣的相关小说

  • 网站开垦中很有用的 jQuery 效果【附源码】
  • 享受31个让人惊异的 CSS3 动漫效果演示
  • 不行惊艳的8个 HTML5 & JavaScript 特效
  • Web 开拓中很实用的13个成效【源码下载】
  • 12款卓绝的白富美型 jQuery 图片轮播插件

 

正文链接:Clipboard.js – 今世艺术实现复制文本到剪贴板

编写翻译来源:梦想天空 ◆ 关怀前端开垦手艺 ◆ 分享网页设计财富

– 现代方法实现复制文本到剪贴板,clipboard.js剪贴板 复制文本到剪贴板应该并轻易,近来早本来就有很干练的 Flash 方法。然则...

1.ZeroClipboard.js

点击按键完毕复制链接也许少年老成段文本到剪贴板,这几个小功效或然不菲人都见过。GitHub上就有这么一个点击开关复制商旅地址的功用。如下图所示:

Github用的是ZeroClipboard来促成这一职能。这一个库是用叁个不可以见到的Flash来实现剪贴操作的。将要Flash 做成透明的,以便于大家位于诸如链接、开关等急需停放的别的地点。那样,顾客分界面看起来未有生成,当点击链接或开关时,实际上点击是却是 Flash,进而完结复制操作。具体贯彻格局,能够参考官方文书档案http://zeroclipboard.org。

大家清楚Flash正走向收缩,不菲作用被更加的强盛的HTML5所代替。况且,出于安全地点的虚构,不菲浏览器都暗中同意禁止使用了Flash。那么有未有不是Flash的达成格局呢?

 

2.clipboard.js

clipboard.js是个进一层轻量的JavaScript库,未有采用Flash,而是依据于Selection和execCommand这四个API,并且利用了HTML5的性状,比如自定义数据的data-* 属性。由此,clipboard.js在宽容性方面比ZeroClipboard.js差,但今世浏览器(IE9 )基本能够宽容。

选用方法特别轻便:

1)下载代码,并引进到文件中。

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

2)实例化叁个Clipboard对象,参数能够是CSS选择器HTML节点、NodeList对象

参数为CSS选择器

new Clipboard('.btn'); // btn为DOM元素的class名, 跟jQuery的用法一样。

参数为HTML节点

var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);

参数为NodeList对象

var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);

3)实例化对象的时候,能够并且设置复制的内容:

var clipboard = new Clipboard('.btn', {
    text: function() {
        return 'to be or not to be'; //剪贴板上的文本
    }
});

4)也得以透过data-*品质来安装要复制的内容

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">点击复制</button>

<script>
    var clipboard = new Clipboard('.btn');
</script>

点击一下,看看是还是不是成功复制到剪贴板:

data-clipboard-target质量的值#foo对应的是指标节点的CSS接受器。

5卡塔 尔(英语:State of Qatar)越多的配置音讯和运用办法,请查阅clipboard.js官网,有意思味的爱人,应该看看它的源码。

静心自身说的看源码,指的是src目录的代码。

代码是长这么的。对的,那是ES6的写法。

相对不要去看dist下的clipboard.js ,那三个是编写翻译之后的代码。

本文头阵于Frank Wang的个人博客, 转发时请附上原著链接http://www.wangxingfeng.com/copy2clipboard/

 

先不思忖浏览器的包容性,看看各浏览器对复制功用的支撑情形:

1、IE浏览器,消除办法有三种,代码如下:

[javascript]

function copy(txtid){  

    var txtObj = document.getElementById(txtid);  

    if(window.clipboardData){ // 仅IE帮忙此指标,firefox、chrome不帮忙  

        //1、通过clipboardData对象达成复制   

        //window.clipboardData.clearData();   

        //window.clipboardData.setData("Text",txtObj.value);   

          

        //2、通过document对象完毕复制:先选择中文本,再试行复制命令   

        //txtObj.select();   

        //document.execCommand("Copy"); // 仅IE帮衬,Firefox报语法错误,chrome推行结果再次回到false(不支持)   

          

        //3、通过TextRange对象达成现复制:能够毫不先选中剧情   

        txtObj.createTextRange().execCommand("Copy");  

    }  

}  

 

function copy(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData){ // 仅IE扶植此指标,firefox、chrome不协理

//1、通过clipboardData对象落成复制

//window.clipboardData.clearData();

//window.clipboardData.setData("Text",txtObj.value);

 

//2、通过document对象完结复制:先选用汉语本,再施行复制命令

//txtObj.select();

//document.execCommand("Copy"); // 仅IE帮衬,Firefox报语法错误,chrome推行结果回到false(不援救)

 

//3、通过TextRange对象落成现复制:能够毫无先选中剧情

txtObj.createTextRange().execCommand("Copy");

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:现代方式实现复制文本到剪贴板,JavaScript实现复

关键词: 68399皇家赌场 Web 前端开发 前端笔记

上一篇:皇家88娱乐平台C基础笔记,黑马程序员

下一篇:没有了

最火资讯