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

如何实现选中复制的功能

它一般可以使用第三方库 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

扫码关注云+社区

领取腾讯云代金券