使用document.execCommand复制内容至剪贴板
API
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
兼容性
http://caniuse.com/#search=document.execCommand
示例
html部分
<input type="text" value="要复制到剪贴板的内容" id="clipboard"/>
javascript部分
var clipboardEl = document.getElementById('clipboard');
clipboardEl.addEventListener('click', function(event){
clipboardEl.select();
if(document.execCommand) {
var rs = document.execCommand('copy', false);
if(rs) {
alert('复制成功');
}
} else {
alert('当前环境不支持此功能');
}
});
补充
经过测试发现,只能通过click事件来触发选中,再执行复制命令才行。移动端用touch相关的事件,可以选中,但是不能复制。
使用document.execCommand复制内容至剪贴板的更多相关文章
- JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- js复制内容到剪贴板
我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...
- Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined
起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...
- JavaScript 十行原生代码实现复制内容到剪贴板
十行原生代码,不引入任何 JS 库,目前大部分浏览器与移动平台都可兼容. function copyToClipboard(value, callback) { var textarea = docu ...
随机推荐
- I2C 读取总是 0xFF,但是 ACK 是正常的解决方法
最近要读写 24C256,没有参考网上代码,自己撸了几个小时,总是不对,读取结果总是 0xFF,但是ACK的返回都是正确的,经过一番努力,终于找到问题所在了. 在芯片规格书里面时序图只有 START ...
- CSS的box-sizing属性
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...
- NYOJ201作业题
作业题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 小白同学这学期有一门课程叫做<数值计算方法>,这是一门有效使用数字计算机求数学问题近似解的方法与过程, ...
- linux 内核提权
不经意间找到了大牛总结的一些Linux提权exp 我直接借花献佛分享给大家 #CVE #Description #Kernels CVE-2017-1000367 [Sudo] (Sudo 1.8.6 ...
- Core Animation 文档翻译(第三篇)
Core Animation 文档翻译(第三篇) 设置Layer对象 当我们使用核心动画时,Layer对象是一切的核心.Layers 管理我们APP的可视化content,Layer也提供了conte ...
- 算法,java代码实现打印万年历
万年历 以1900年1月1号星期一为时间原点 星期日 第一天 星期一 第二天 星期二 第三天 星期三 第四天 星期四 第五天 星期五 第六天 星期六 第七天 1.计算出当前日 ...
- 配置国内PIP源方法
python开发者都知道,当我们pip install安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦, 随着国内python开发的增多,越来越多企业都开放了自 ...
- 关于vueThink框架打包发布的一些问题
刚开始发布自己的vueThink项目的时候,总是出现404错误,后来经过上网查找,发现是路径的问题,这方面的知识,网上很多,就不过多阐述了.我主要想说的是自己的项目发布的时候,admin账号登录的时候 ...
- 织梦CMS搭建网站必做的服务器相关安全设置
http://help.dedecms.com/install-use/server/2011/1109/2124.html#printSource http://www.aliweihu.com/9 ...
- phpcms v9——工作需要【套模板】
phpcms v9 模板标签说明整理 作者:匿名 来源:ChinaZ源码报导 浏览:44061次 2011-6-17 15:52:09 字号:大 中 小 [摘要]本文介绍phpcms v9中模板标签使 ...