（2）将指定内容复制到剪切板

最新推荐文章于 2023-05-18 19:47:09 发布

俊小赞

最新推荐文章于 2023-05-18 19:47:09 发布

阅读量414

点赞数 1

分类专栏： # JavaScript Tool Fun 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44808483/article/details/116709481

版权

JavaScript Tool Fun 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、实现代码

html 代码部分：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>将指定内容复制到剪切板</title>
  </head>
  <body>
    <p><input type="text" value="需复制的内容请在此输入" /></p>
    <button id="btn">copy</button>
  </body>
  <script>
    ……
  </script>
</html>

javascript 代码部分

const input = document.querySelector('input');
const btn = document.getElementById('btn');

btn.onclick = function () {
  const value = input.value;
  let isCopy = copyClipboard(value);

  console.log(isCopy ? '复制成功' : '复制失败');
};

/**
 * 将指定内容复制到剪切板
 * @param {String} copyStr 需要复制的内容
 * @return {Boolean} bool 是否复制成功
 */
function copyClipboard(copyStr) {
  const input = document.createElement('input');
  input.value = copyStr;
  document.body.appendChild(input);
  input.select(); // 选取文本域中的内容.
  let bool = document.execCommand('Copy'); // 不支持copy方法返回false，支持返回true
  document.body.removeChild(input);	// 必需是在复制语句之后移除
  return bool;
}

二、原理分析

实现原理：首先获取到需要复制的内容，然后通过脚本创建一个文本框设置内容在文本框内，并且选中文本框中的内容，最后通过execCommand方法实现复制。

方法描述

createElement(tagName)：「方法」创建指定的HTML元素节点；tagName 指定的节点，必需；返回HTML节点。
appendChild(node)：「方法」向节点添加最后一个子节点；node 需要添加的DOM，必需；返回被添加的节点。
execCommand(aCommandName, aShowDefaultUI, aValueArgument)：「方法」；aCommandName 命令的名称，必需，aShowDefaultUI 是否展示用户界面，布尔值常为false，可选，aValueArgument 一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。
removeChild(node)：「方法」向节点移除最后一个子节点；node 需要移除的DOM，必需；返回被移除的节点。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！

俊小赞

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
（2）将指定内容复制到剪切板

一、实现代码html 代码部分：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>将指定内容复制到剪切板</title> </head> <body> <p><input type="text" value="需复制的内容请在此输入" /></p&gt
复制链接

扫一扫