怎样使用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库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
随机推荐
- 指定版本下载yum离线安装包
#!/bin/bash releasever=7 for i in salt-minion salt-api salt-master docker-ce docker-ce-cli docker-co ...
- wm_concat()函数
转: Oracle wm_concat()函数 oracle wm_concat(column)函数使我们经常会使用到的,下面就教您如何使用oraclewm_concat(column)函数实现字段合 ...
- Kibana Query Language(KQL)
语法: 官方文档 If you’re familiar with Kibana’s old lucene query syntax, you should feel right at home wit ...
- python一个文件里面多个函数同时执行(多进程的方法,并发)
#coding=utf-8 import timefrom selenium import webdriverimport threading def fun1(a): print a def fun ...
- delphi type
声明: 1. type Name = Existing type; 2. type Name = type Existing type; 3. type Name = (EnumValue1 [=va ...
- list列表转tree树方法
list转tree递归转换 /** * 递归遍历节点 * @param sourceList * @param parentCode * @return */ public List<Offic ...
- golang继承与接口
继承 结构体 Go语言的结构体(struct)和其他语言的类(class)有同等的地位,但Go语言放弃了包括继 承在内的大量面向对象特性,只保留了组合(composition)这个最基础的特性. 组合 ...
- poj 2362:square
题目大意:给你T组数据,每组数据有n个棍子,问你能不能用这些棍子拼成一个正方形(所有都要用上,而且不能截断棍子). Sample Input 34 1 1 1 15 10 20 30 40 508 1 ...
- [LuoguP2167][SDOI2009]Bill的挑战_容斥原理/状压dp
Bill的挑战 题目链接:https://www.luogu.org/problem/P2167 数据范围:略. 题解: 因为$k$特别小,想到状压. 状压的方式也非常简单,就是暴力枚举. 但是会不会 ...
- TemplateView , ListView ,DetailView三种常用类视图用法
参考博客: https://blog.csdn.net/weixin_36571185/article/details/74280102