怎样使用js将文本复制到系统粘贴板中
需要使用到三个document方法:
1. document.execCommand(); 执行某个命令
2. document.queryCommandSupported(); 检测浏览器是否支持某个命令
3. document.queryCommandEnabled(); 检测当前状态下某个命令是否可用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<input type="button" value="Copy" onclick="doCopy()">
<script>
function doCopy() {
// document.queryCommandSupported()方法返回一个布尔值，表示浏览器是否支持document.execCommand()的某个命令
if (document.queryCommandSupported('copy')) {
copyText('你好, 世界');
} else {
console.log('当前浏览器不支持 copy命令');
}
} function copyText(text) {
var input = document.createElement('textarea');
document.body.appendChild(input);
// 将文本赋值给输入框
input.value = text;
// 聚焦并选中
input.focus();
input.select(); // document.queryCommandEnabled()方法返回一个布尔值，表示当前是否可用document.execCommand()的某个命令。
// 比如copy命令只有存在文本选中时才可用，如果没有选中文本，就不可用。
if (document.queryCommandEnabled('copy')) {
// 执行 copy 命令
var success = document.execCommand('copy');
// 移除输入框节点
input.remove();
console.log('Copy Ok');
} else {
console.log('queryCommandEnabled is false');
}
}
</script>
</body> </html>
注意:
1. document.execCommand() 支持的命令很多, 详情可以点这里: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
2. 这三个方法核心是第一个, 可以使用它们的节点有: 输入框相关节点 / document.designMode为"on"时的文档 / contenteditable属性为true的节点.
怎样使用js将文本复制到系统粘贴板中的更多相关文章
- Ubuntu Vim 复制到系统粘贴板
/************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...
- Intellij IDE使用 ideavim，不能复制文档到系统粘贴板
vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...
- js实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 复制文字、 复制链接到粘贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- vue复制textarea文本域内容到粘贴板
vue实现复制内容到粘贴板 方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...
- IOS 访问系统粘贴板
粘贴板提供了一种核心OS特性,用于跨应用程序共享数据.用户可以跨应用来复制粘贴,也可以设置只在本应用中复制粘贴用来保护隐私. UIPasteboard类允许访问共享的设备粘贴板以及内容,下面代码返回一 ...
- vim中使用系统粘贴板
在vim中如果想使用系统粘贴板,也就是说,如果你在其他程序中复制内容,那么使用shift+insert组合键就可以粘贴进来. 需要说明的是,vim中的粘贴板有很多,你可以输入 :reg来进行查看.而我 ...
- JS实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
随机推荐
- elasticsearch文档冲突
https://www.elastic.co/guide/cn/elasticsearch/guide/current/optimistic-concurrency-control.html当我们之前 ...
- js-常见算法操作
字符串操作 判断回文字符串 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function palindrome(str){ // \W匹配任何非单词字符.等价于“[^A-Za- ...
- java课后实验性问题1
一.一个java类文件中只能有一个公有类吗? 测试代码 public class Test{ public static void main(String[] args){ } public clas ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- Memcache启动停止
启动Memcached root -P /var/run/memcached.pid 1)启动参数说明: -d 选项是启动一个守护进程, -l 是监听的服务器IP地址,默认为所有网卡. -p 是设置M ...
- Facebook币Libra学习-1.核心概念
Libra区块链是一个基于Libra协议的加密认证的分布式数据库.本文将简略介绍Libra协议的核心概念.其详细说明请参阅Libra技术白皮书. Libra区块链由分布式的Validator节点网络维 ...
- java定时任务Timer/scheduleAtFixedRate
Timer类是用来执行任务的类,定时器 scheduleAtFixedRate模式可以用,在这个模式下,Timer会尽量的让任务在一个固定的频率下运行. 参考:http://swiftlet.net/ ...
- SqlServer视图介绍以及创建方式
1.,视图的介绍: (ps:学sqlServer视图是在面试问到之后学的,答不上来太low了,然后就去各种搜索操作对视图也有了自己的理解) 其实视图就是一张表,是一张表中或者多张表中经过某种筛选后显示 ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_01-页面静态化需求分析
上半部分就是静态化 业务流程如下: 1.获取模型数据 2.制作模板 3.对页面进行静态化 4.将静态化生成的html页面存放文件系统中 5.将存放在文件系统的html文件发布到服务器
- 用ConfigMap管理配置（10）
一.ConfigMap介绍管理配置: ConfigMap介绍 Secret 可以为 Pod 提供密码.Token.私钥等敏感数据:对于一些非敏感数据,比如应用的配置信息,则可以用 ConfigMa ...