怎样使用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 sql插件 2.4及以下版本配置
github地址:https://github.com/NLPchina/elasticsearch-sql/ 方式一:github elasticsearch-sql上提供的安装方法cmd进入到本地 ...
- 使用 docker 部署 typecho 的 nginx 配置文件
savokiss.com.conf server { listen ssl http2 reuseport; server_name savokiss.com www.savokiss.com; ro ...
- hystrix（一） 简单使用, 以及动态配置更新
本文转载自https://my.oschina.net/u/1169457/blog/1787414 hystrix 简单使用, 以及动态配置更新 概述 只介绍同步模式下简单的使用, 有助于快速接入, ...
- IDEA 好用的插件
IDEA 好用的插件 非自带的一些自用插件. Alibaba java Coding Guidelines 阿里出的java规范,支持eclipse和Idea,支持实时扫描,规范代码,养成良好习惯.推 ...
- SQL-W3School-高级：SQL 通配符
ylbtech-SQL-W3School-高级:SQL 通配符 1.返回顶部 1. 在搜索数据库中的数据时,您可以使用 SQL 通配符. SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代 ...
- C之数据类型
java的数据类型 byte 1个字节 boolean 1个字节 short 2个字节 char 2个字节 int 4个字节 float 4个字节 long 8个字节 double 8个字节 c语言的 ...
- Servlet的运行原理
- Python xlwt 模块执行出错Exception: String longer than 32767 characters
使用Python搜集数据时用到xlwt保存到excel文件,但是数据量有点大时出现 Exception: String longer than 32767 characters 搜索类似的问题都是建议 ...
- scikit-learn机器学习(一)简单线性回归
# -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as plt ## 设置字符集,防止中文乱码 import ma ...
- 深入理解 iptables 和 netfilter 架构
[译] 深入理解 iptables 和 netfilter 架构 Published at 2019-02-18 | Last Update 译者序 本文翻译自 2015 年的一篇英文博客 A Dee ...