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复制内容至剪贴板的更多相关文章

  1. JavaScript复制内容到剪贴板

    移动端 需要复制内容到剪贴板时, clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容, 完成一键复制淘口令的功能. 注意使用clipborad.js时,i ...

  2. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  3. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  4. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  5. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  6. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  7. js复制内容到剪贴板

    我们web上的复制,有时候尽管可以用鼠标选中,然后复制,但是某些时候,文字不方便选中.因此,我们自定义一个复制按钮,然后通过点击它,把想要的内容复制到剪贴板上.我归纳总结了几种方法: 1.ZeroCl ...

  8. Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined

    起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...

  9. JavaScript 十行原生代码实现复制内容到剪贴板

    十行原生代码,不引入任何 JS 库,目前大部分浏览器与移动平台都可兼容. function copyToClipboard(value, callback) { var textarea = docu ...

随机推荐

  1. 13、ABPZero系列教程之拼多多卖家工具 微信公众号开发前的准备

    因为是开发阶段,我需要在本地调试,而微信开发需要配置域名,这样natapp.cn就有了用武之地,应该说natapp就是为此而生的. natapp.cn是什么 这是一个内网映射的网站,支持微信公众号.小 ...

  2. 如何调用sklearn模块做交叉验证

    终于搞明白了如何用sklearn做交叉验证!!! 一般在建立完模型之后,我们要预测模型的好坏,为了试验的可靠性(排除一次测试的偶然性)我们要进行多次测试验证,这时就要用交叉验证. sklearn中的s ...

  3. CTF---安全杂项入门第二题 A记录

    A记录分值:20 来源: sammie 难度:中 参与人数:2255人 Get Flag:566人 答题人数:621人 解题通过率:91% 他在看什么视频,好像很好看,不知道是什么网站的. 还好我截取 ...

  4. 电脑打不开网页,使用dns优化下就可以了。

    通过电脑管家dns优化下就可以了.启用114DNS

  5. [国嵌攻略][171][V4L2图像编程接口深度学习]

    V4L2摄像编程模型 1.打开摄像头设备文件 2.获取驱动信息-VIDIOC_QUERYCAP 3.设置图像格式-VIDIOC_S_FMT 4.申请帧缓冲-VIDIOC_REQBUFS 5.获取帧缓冲 ...

  6. 小白的Python之路 day5 模块XML特点和用法

    模块XML的特点和用法 一.简介 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今 ...

  7. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  8. github 中删除仓库

    删除时,填充的名字是库的名字

  9. C#中的基元类型、值类型和引用类型

    C# 中的基元类型.值类型和引用类型 1. 基元类型(Primitive Type) 编译器直接支持的类型称为基元类型.基元类型可以直接映射到 FCL 中存在的类型.例如,int a = 10 中的 ...

  10. web.xml 报错

    1.The markup in the document following the root element must be well-formed. 原因是配置时没有 放在根下 <web-a ...