怎样使用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库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
随机推荐
- Git 基本应用
微信公众号:Java修炼指南博客园:https://home.cnblogs.com/u/wuyx/CSDN: https://mp.csdn.net/简书:https://www.jianshu.c ...
- Flutter移动电商实战 --（21）分类页_类别信息接口调试
先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPhysics(), 大R刷新后,点 ...
- PHP学习之工厂方法模式
<?php //工厂方法模式 interface Doing { function eat(); function sleep(); } class Cat implements Doing { ...
- 如何从社区的patchwork下载补丁并应用到当前内核源码?
1. 下载 wget http://patchwork.ozlabs.org/series/111111/mbox 2. 打补丁 git am mbox
- EasyUI之toolTip
<a class="easyui-tooltip" title="提示框" href="http://www.baidu.com"&g ...
- process.env.NODE_ENV
Node 随记 if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js') } else { ...
- Vue学习笔记（四）一起进阶吧
参考链接地址:https://segmentfault.com/a/1190000009188689?from=timeline Vuex框架原理与源码分析: http://tech.meituan. ...
- webstorm关闭vim模式
- wp-query调用前几篇文章的方法
---恢复内容开始--- 利用强大的wp-query函数调用指定分类下的前几篇文章,下面的代码表示调用的是分类ID4下的前两篇文章. <?php $cunt_wenzhen = array('c ...
- Flutter安卓客户端打包
想要安装到手机上,必须要进行打包,因为没有苹果手机,所以只能打包Android客户端的apk. 检查 App的配置 查看默认应用程序清单文件(位于/android/app/src/main/中的And ...