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. I2C 读取总是 0xFF,但是 ACK 是正常的解决方法

    最近要读写 24C256,没有参考网上代码,自己撸了几个小时,总是不对,读取结果总是 0xFF,但是ACK的返回都是正确的,经过一番努力,终于找到问题所在了. 在芯片规格书里面时序图只有 START ...

  2. CSS的box-sizing属性

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...

  3. NYOJ201作业题

    作业题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 小白同学这学期有一门课程叫做<数值计算方法>,这是一门有效使用数字计算机求数学问题近似解的方法与过程, ...

  4. linux 内核提权

    不经意间找到了大牛总结的一些Linux提权exp 我直接借花献佛分享给大家 #CVE #Description #Kernels CVE-2017-1000367 [Sudo] (Sudo 1.8.6 ...

  5. Core Animation 文档翻译(第三篇)

    Core Animation 文档翻译(第三篇) 设置Layer对象 当我们使用核心动画时,Layer对象是一切的核心.Layers 管理我们APP的可视化content,Layer也提供了conte ...

  6. 算法,java代码实现打印万年历

      万年历 以1900年1月1号星期一为时间原点 星期日 第一天 星期一 第二天 星期二 第三天 星期三 第四天 星期四 第五天 星期五 第六天 星期六 第七天            1.计算出当前日 ...

  7. 配置国内PIP源方法

    python开发者都知道,当我们pip install安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦, 随着国内python开发的增多,越来越多企业都开放了自 ...

  8. 关于vueThink框架打包发布的一些问题

    刚开始发布自己的vueThink项目的时候,总是出现404错误,后来经过上网查找,发现是路径的问题,这方面的知识,网上很多,就不过多阐述了.我主要想说的是自己的项目发布的时候,admin账号登录的时候 ...

  9. 织梦CMS搭建网站必做的服务器相关安全设置

    http://help.dedecms.com/install-use/server/2011/1109/2124.html#printSource http://www.aliweihu.com/9 ...

  10. phpcms v9——工作需要【套模板】

    phpcms v9 模板标签说明整理 作者:匿名 来源:ChinaZ源码报导 浏览:44061次 2011-6-17 15:52:09 字号:大 中 小 [摘要]本文介绍phpcms v9中模板标签使 ...