原生Js实现复制(Copy)的方法总结,execCommand和clipboardData的使用

时间: 2017-11-06阅读: 10193标签: 复制

原生Js实现复制(Copy)的两种方法,一种是利用 clipboardData,另外一种则是用 execCommand(),今天将统一讲解一下关于他们的使用方法。


document.execCommand

当一个HTML文档切换到设计模式(designMode)时,文档对象暴露 execCommand方法,该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选(粗体,斜体等),而其他命令插入新元素(添加链接)或影响整行(缩进)。当使用 contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素。

兼容性:

特征ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
复制copy43(Yes)  44192910

  

clipboardData

clipboardData对象 ,注意网页里剪贴板到现在只能设置Text类型,即只能复制文本 clearData("Text")清空粘贴板 getData("Text")读取粘贴板的值 setData("Text",val)设置粘贴板的值 当复制的时候body的oncopy事件被触发,直接return false就是禁止复制,注意是不能复制网页里的文本了。

(注意:主要用于支持IE,ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置)


代码实现

html:

<span class="hleft" v-on:click="copyLink(data.url,'text')">复制链接</span>
<textarea id="text">{{data.url}}</textarea>

JS:

copyToClipBoard:function(s,id){ //复制到剪切板
	if(document.execCommand){
		var e=document.getElementById(id);
		e.select();
		document.execCommand("Copy");
		return true;
	}
	if(window.clipboardData){
        window.clipboardData.setData("Text", s);
        return true;
    }
	return false;
},


完结~~~~~~~~~~~~~~~~


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/52

原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)

在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。纯js实现复制文本并提示复制成功(干货)适用所有浏览器

Vue中结合clipboard实现复制功能

首先现在Vue中引入clipboard,在需要使用的组件中import 引入clipboard.不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象

程序员_代码神注释鉴赏大全(可复制粘贴)

程序员个性注释,让你的代码飞起来。一时兴起就收集了以下神注释,希望能为广大ITer带来快乐,以下是收集了以下神注释,希望能为广大程序员们带来快乐,缓解你们工作中的压力

Js使用Object.assign()对象的复制、合并、封装等操作

Js使用Object.assign()对象的复制:Object.assign()只对顶层属性做了赋值,Object.assign()合并/封装等操作:具有相同属性的其他对象覆盖;null、undefined会被忽略;字符串会被封装成单字符的可枚举属性数组

网页不让用户复制方法总汇,设置html禁止选择,保护源码,js禁止复制文字

这篇文章主要讲解:右键复制失效方法、菜单-文件-另存为-失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全