js实现一键复制黏贴功能

带脑子的CV工程师

已于 2022-03-28 12:41:29 修改

阅读量880

点赞数

分类专栏： js 文章标签：微信 javascript 前端

于 2022-03-28 10:23:05 首次发布

本文链接：https://blog.csdn.net/qq_36262295/article/details/123788822

版权

js 专栏收录该内容

98 篇文章 1 订阅

订阅专栏

clipboard

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="codeBlock">
    <code>let a = 1;  <p style="color:red">
      https://www.jianshu.com/p/00344d68c0a2https://www.jian
    </p></code>
  </div>
  <button id="copy">复制</button>
  <button id="paste">黏贴</button>
</body>
<script>
  copy.addEventListener("click", () => {
    //给剪贴板中写入内容
    navigator.clipboard.writeText(codeBlock.innerHTML)
      .then(() => alert('复制成功'))
  })

  paste.addEventListener('click', () => {
    // 读取剪贴板的内容
    navigator.clipboard.readText()
      .then(text => { console.log(text), codeBlock.innerHTML = text + codeBlock.innerHTML })
  })  
</script>

</html>

选中文本的复制黏贴

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="codeBlock">
    <code>let a = 1;  <p style="color:red">
      https://www.jianshu.com/p/00344d68c0a2https://www.jian
    </p></code>
  </div>
  <button id="copy">复制</button>
  <button id="paste">黏贴</button>
</body>
<script>
  function foo () {
    // 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
    let selObj = window.getSelection();
    console.log(selObj);
    // Range 接口表示一个包含节点与文本节点的一部分的文档片段
    let selRange = selObj.getRangeAt(0);
    console.log(selRange);
    //Range.cloneContents() 返回一个 DocumentFragment，它是 Range 中所有的 Node 对象的副本。
    var docFragment = selRange.cloneContents();
    console.log(docFragment);
    var testDiv = document.createElement("div");
    testDiv.appendChild(docFragment);
    var selectHtml = testDiv.innerHTML;
    console.log(selectHtml);
    document.body.appendChild(testDiv)
  }
  // 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单
  // 阻止默认行为 就没有那个菜单出来了
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
    console.log('?')
  })
  document.addEventListener('mousedown', function (e) {
    if (e.button == 2) {
      console.log('?')
    } else if (e.button == 0) {
      // alert("你点了左键");
      console.log('?')
    } else if (e.button == 1) {
      alert("你点了滚轮");
    }
  })

</script>

</html>

带脑子的CV工程师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现一键复制黏贴功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
复制链接

扫一扫