搜索
创作
提问
登录注册
展开

专栏首页服务器运维笔记如何实现选中复制的功能

如何实现选中复制的功能

阅读 1250

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

主要有两个要点

  1. 选中
  2. 复制

选中

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

选中的代码如下

const selection = window.getSelection();
const range = document.createRange();

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

selectedText = selection.toString();

取消选中的代码如下

window.getSelection().removeAllRanges();

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

复制

复制就比较简单了，execCommand

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

本文分享自微信公众号 - 全栈成长之路（shanyue-road）

原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。

原始发表时间：2020-06-03

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 云服务器中 ssh key 管理 与 github 的配置

    程序员经常挂在嘴边的一句话是: 面向 github 编程。如果没有 github 对程序员而言万古如长夜，github 对程序员的重要性可见一斑。

    山月

  • 前端开发必会的HTML/CSS硬知识

    山月

  • 浏览器中的跨域问题与 CORS

    跨域，这或许是前端面试中最常碰到的问题了，大概因为跨域问题是浏览器环境中的特有问题，而且随处可见，如同蚊子不仅盯你肉而且处处围着你转让你心烦。「你看，在服务器发...

    山月

  • 固定表头和左侧列的表格插件DataTable 原

    由于表格比较长客户要求左侧的部分列要固定，以及头部固定，并有搜索排序功能，找了好久终于找到一个比较好的插件，DataTable,网站：https://datat...

    tianyawhl

  • 来了，iOS的JSCore与H5的交互

    h5概念很热，咱们不多多说，但是在移动端的App中某些需要快速开发的地方也是很有好处--可以把一部分不想做的，不方便做的甩给web端去做，咱么只需要做好nati...

    大话swift

  • Docker容器跨主机互联

    当两个Docker容器在同一主机时，可以通过--link命令让两者直接互相访问。 如果要跨主机实现容器互联，则往往需要容器知道其他物理主机的IP地址 利用Amb...

    dys

  • Fastdfs高可用集群搭建

    先来简单说一下这个架构图，前段是两台nginx + keepalived的高可用负载均衡群集，对后面两个tracker服务器做负载均衡，然后最后端是由fastd...

    dogfei

  • ThinkPHP5.1学习笔记 数据库操作

    V5.1.23+版本开始，支持findOrEmpty方法，当查询不存在的时候返回空数组而不是Null。

    Mirror王宇阳

  • python 自动化测试（4）：日志类封装

    本篇日志封装比较简单，符合简单的代码运行时记录。使用python自带logging库进行封装。 主要包含指定保存日志的文件路径，日志级别，以及调用文件将日志存...

    Mokwing

  • 博弈论及算法实现

    在生活中五子棋也是一种先手有必赢策略的游戏，有人会说五子棋先手我也会输啊，所以 博弈论问题都有个类似如“参与者足够聪明”，“两人都不犯错"的前提。     在此...

    Angel_Kitty
更多文章

作者介绍

山月

专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券