怎样使用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库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
随机推荐
- 编译工具链，生成各个平台的ffmpeg版本的库
1.在开始动手编译ffmpeg之前我们来梳理一下几个概念,gcc.g++.msvc.mingw.clang.cmake.make.qmake 作为一个windows软件工程师,以为长时间浸淫在各种强大 ...
- mysql 优化知识点
附录: https://www.nowcoder.com/discuss/150059?type=0&order=0&pos=13&page=0 本文概要 概述 为什么要优化 ...
- Unknown system variable 'query_cache_size'
java连接mysql 报错 java.sql.SQLException: Unknown system variable 'query_cache_size'at com.mysql.cj.jdbc ...
- Windows使用Vagrant&VirtualBox搭建虚拟开发环境
Vagrant 是一款用来构建虚拟开发环境的工具 , 我们可以通过 Vagrant 封装一个 Linux 的开发环境 , 分发给团队成员 ; 成员可以在自己喜欢的桌面系统 Mac/Windows/Li ...
- C++ replace replace_if replace_copy replace_copy_if
#include <iostream>#include <list>#include <algorithm>#include <iterator>#in ...
- 【网站部署】flask
记录下常用的命令: nohup gunicorn --workers=2 --timeout=400 app:app &ps -ax scp -p ./***.h5 user@**.**.** ...
- asp.net网站访问时不能显示页面
web => 属性 => web => servers =>create virtual directory
- Ubuntu安装teamview客户端
1,下载teamviem客户端的Ubuntu版本 下载地址 https://www.teamviewer.com/en/download/linux/ 2,安装 apt install ./teamv ...
- STM32F10xx(高容量)WiFi模块的初始化和使用
本次实验是使用每次传输不超过200B的ESP8266芯片的WiFi模块,WiFi模块内部自有驱动,我们初始化它,只需要发送指定的指令给他就可以了,指定的指令其实是使用USART3的复用的PB10和PB ...
- Jmeter 逻辑控制器 之 ForEach 控制器
一.认识 ForEach 控制器 如下,创建一个 ForEach 控制器 设置界面如下: 输入变量前缀:要进行循环读取的变量前缀 Start index for loop (exclusive):循环 ...