使用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 ...
随机推荐
- 接口自动化测试框架 (一) :APIAutoTest框架
前言 随着测试技术的发展,接口自动化测试逐渐成为各大公司投入产出比最高的测试技术.介入时间早,执行效率高,稳定性高的优点,让越来越多的公司引入接口自动化测试. 框架简介 APIAutoTest是处理A ...
- DOM拓展
DOM拓展 1.选择符API 所谓选择符API即是根据css选择符选择与某个模式相匹配的DOM元素,jQuery的核心就是通过css选择符查询DOM文档取得元素的引用,从而抛弃了原有繁琐的getELe ...
- 基于Windows下浏览器无法正常打开的解决方案
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- FtpUtil.java测试 (淘淘商城第三课文件上传)
首先在common-taotao中创建一个utils包,复制FtpUtil.java到其中.然后如下: @Test public void testFtpUtil() throws Exception ...
- Zigbee Class 直播公告2016-10-10
周一我们将开始本期课程的首次直播, 详情如下: 场次 第一场 阶段 入门 开始时间 2016-10-10 19:00 结束时间 不定 斗鱼地址 douyu.com/zigbeeclass 内容 本期 ...
- 制作ssh互信的docker镜像
Dockerfile FROM ubuntu:16.04 # package RUN apt-get update; apt-get -y install ssh COPY ssh_config /e ...
- 使用ng-options指令创建下拉框
今天在学习AngularJs中使用ng-options指令创建下拉框时遇到点问题,这里总结一下. 其实,使用ng-options指令创建下拉框很简单,只需要绑定两个属性. ng-options指令用于 ...
- 如何开发由Create-React-App 引导的应用(二)
此文章是翻译How to develop apps bootstrapped with Create React App 官方文档 系列文章 如何开发由Create-React-App 引导的应用 如 ...
- PHPCMS模板里面使用自定义函数
首先我在/phpcms/libs/functions/extention.func.php里面新增了一个函数 ============================================= ...
- asp.net -mvc框架复习(7)-基于MVC搭建用户登录项目框架
整体框架: 一.搭建Model层 1.添加通用数据访问类 2.添加实体类(封装和传递数据,和数据库中数据表对应) 3.添加数据访问类(通常和实体类同名,但是后缀名发生改变) 二.搭建控制器层Contr ...