需要使用到三个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将文本复制到系统粘贴板中的更多相关文章

  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. SVN的工作机制

    一.C/S结构 二.基本操作 1. 检出(Checkout)  把服务器端版本库内容完整下载到本地. 2. 更新(Update)  把服务器端相对于本地的新的修改下载到本地. 3. 提交(Comm ...

  2. PHP中部分宏应用

    1.字符串复制 ZVAL_STRINGL(pzv, str, len, dup):str 和 len 分别为内存中保存的字符串地址和他的长度,dup之名该字符串是否需要被复制,值为1则将先申请一块新内 ...

  3. mysql索引分类

    mysql索引分类 一.总结 一句话总结: 主键索引:设定为主键后数据库会自动建立索引,innodb为聚簇索引 单值索引:一个索引只包含单个列,一个表可以有多个单列索引:CREATE INDEX id ...

  4. 使用express-session实现登录效果

    本文为后端练兵内容,重复造轮子,重复造轮子才能有经验,才能生出花来. 本次练兵,采用的是数据库保存账户密码,后端通过查数据库的方式,实现账号和密码的校验. 如果验证成功,将登陆状态保存在session ...

  5. vue问题五：element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  6. Docker 版本的更新和安装

    涉及到网址:1.https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/#prerequisites (官网)       ...

  7. Windows7下IIS+php配置教程

    WINDOWS 7 IIS+php配置教程,具体内容如下 打开 开始 -> 控制面板 -> 程序与功能 -> 打开或关闭windows功能 勾选Internet信息服务,并点击前面的 ...

  8. Java NIO学习笔记八 Pipe

    Java NIO Pipe Java NIO管道是两个线程之间的单向数据连接.Pipe 具有源信道和接受通道.您将数据写入sink通道.然后可以从源通道读取该数据. 这是一个原理的Pipe流程图: J ...

  9. @value取值

    配置文件的书写 valm.DlUrl=http://14.168.55.203:5199/FOSSecMngTemplate?wsdl vals.DlUrl=http://14.168.55.203: ...

  10. PAT 甲级 1017 Queueing at Bank (25 分)（模拟题，有点思维小技巧，第二次做才理清思路）

    1017 Queueing at Bank (25 分)   Suppose a bank has K windows open for service. There is a yellow line ...