前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何实现选中复制的功能

如何实现选中复制的功能

作者头像
山月
发布2020-06-04 14:33:33
2.4K0
发布2020-06-04 14:33:33
举报

它一般可以使用第三方库 clipboard.js[1] 来实现,源码很简单,可以读一读

主要有两个要点

  1. 选中
  2. 复制

选中

选中主要利用了 Selection API[2]

选中的代码如下

代码语言:javascript
复制
const selection = window.getSelection();
const range = document.createRange();

range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);

selectedText = selection.toString();

取消选中的代码如下

代码语言:javascript
复制
window.getSelection().removeAllRanges();

它有现成的第三方库可以使用: select.js[3]

复制

复制就比较简单了,execCommand

代码语言:javascript
复制
document.exec('copy')

Reference

[1] clipboard.js: https://github.com/zenorocha/clipboard.js

[2] Selection API: https://developer.mozilla.org/en-US/docs/Web/API/Selection

[3] select.js: https://github.com/zenorocha/select

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-06-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈成长之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 选中
  • 复制
    • Reference
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档