需要使用到三个document方法:

1. document.execCommand(); 执行某个命令

2. document.queryCommandSupported(); 检测浏览器是否支持某个命令

3. document.queryCommandEnabled(); 检测当前状态下某个命令是否可用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12. <input type="button" value="Copy" onclick="doCopy()">
  13. <script>
  14. function doCopy() {
  15. // document.queryCommandSupported()方法返回一个布尔值,表示浏览器是否支持document.execCommand()的某个命令
  16. if (document.queryCommandSupported('copy')) {
  17. copyText('你好, 世界');
  18. } else {
  19. console.log('当前浏览器不支持 copy命令');
  20. }
  21. }
  22.  
  23. function copyText(text) {
  24. var input = document.createElement('textarea');
  25. document.body.appendChild(input);
  26. // 将文本赋值给输入框
  27. input.value = text;
  28. // 聚焦并选中
  29. input.focus();
  30. input.select();
  31.  
  32. // document.queryCommandEnabled()方法返回一个布尔值,表示当前是否可用document.execCommand()的某个命令。
  33. // 比如copy命令只有存在文本选中时才可用,如果没有选中文本,就不可用。
  34. if (document.queryCommandEnabled('copy')) {
  35. // 执行 copy 命令
  36. var success = document.execCommand('copy');
  37. // 移除输入框节点
  38. input.remove();
  39. console.log('Copy Ok');
  40. } else {
  41. console.log('queryCommandEnabled is false');
  42. }
  43. }
  44. </script>
  45. </body>
  46.  
  47. </html>

注意: 

1. document.execCommand() 支持的命令很多, 详情可以点这里: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

2. 这三个方法核心是第一个, 可以使用它们的节点有: 输入框相关节点 / document.designMode为"on"时的文档 / contenteditable属性为true的节点.

怎样使用js将文本复制到系统粘贴板中的更多相关文章

  1. Ubuntu Vim 复制到系统粘贴板

    /************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...

  2. Intellij IDE使用 ideavim,不能复制文档到系统粘贴板

    vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...

  3. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. js 复制文字、 复制链接到粘贴板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  6. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  7. IOS 访问系统粘贴板

    粘贴板提供了一种核心OS特性,用于跨应用程序共享数据.用户可以跨应用来复制粘贴,也可以设置只在本应用中复制粘贴用来保护隐私. UIPasteboard类允许访问共享的设备粘贴板以及内容,下面代码返回一 ...

  8. vim中使用系统粘贴板

    在vim中如果想使用系统粘贴板,也就是说,如果你在其他程序中复制内容,那么使用shift+insert组合键就可以粘贴进来. 需要说明的是,vim中的粘贴板有很多,你可以输入 :reg来进行查看.而我 ...

  9. JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...

随机推荐

  1. 指定版本下载yum离线安装包

    #!/bin/bash releasever=7 for i in salt-minion salt-api salt-master docker-ce docker-ce-cli docker-co ...

  2. wm_concat()函数

    转: Oracle wm_concat()函数 oracle wm_concat(column)函数使我们经常会使用到的,下面就教您如何使用oraclewm_concat(column)函数实现字段合 ...

  3. Kibana Query Language(KQL)

    语法: 官方文档 If you’re familiar with Kibana’s old lucene query syntax, you should feel right at home wit ...

  4. python一个文件里面多个函数同时执行(多进程的方法,并发)

    #coding=utf-8 import timefrom selenium import webdriverimport threading def fun1(a): print a def fun ...

  5. delphi type

    声明: 1. type Name = Existing type; 2. type Name = type Existing type; 3. type Name = (EnumValue1 [=va ...

  6. list列表转tree树方法

    list转tree递归转换 /** * 递归遍历节点 * @param sourceList * @param parentCode * @return */ public List<Offic ...

  7. golang继承与接口

    继承 结构体 Go语言的结构体(struct)和其他语言的类(class)有同等的地位,但Go语言放弃了包括继 承在内的大量面向对象特性,只保留了组合(composition)这个最基础的特性. 组合 ...

  8. poj 2362:square

    题目大意:给你T组数据,每组数据有n个棍子,问你能不能用这些棍子拼成一个正方形(所有都要用上,而且不能截断棍子). Sample Input 34 1 1 1 15 10 20 30 40 508 1 ...

  9. [LuoguP2167][SDOI2009]Bill的挑战_容斥原理/状压dp

    Bill的挑战 题目链接:https://www.luogu.org/problem/P2167 数据范围:略. 题解: 因为$k$特别小,想到状压. 状压的方式也非常简单,就是暴力枚举. 但是会不会 ...

  10. TemplateView , ListView ,DetailView三种常用类视图用法

    参考博客: https://blog.csdn.net/weixin_36571185/article/details/74280102