当前位置： 首页 > news >正文

JS 方法实现复制粘贴

news 2025/9/6 20:09:37

背景

以前我们一涉及到复制粘贴功能，实现思路一般都是：

  • 创建一个 textarea 标签

  • 让这个 textarea 不可见（定位）

  • 给这个 textarea 赋值

  • 把这个 textarea 塞到页面中

  • 调用 textarea 的 select 方法

  • 调用 document.execCommand('copy')

  • 删除 textarea 标签

代码如下

const legacyCopy = (value: string) => {const ta = document.createElement('textarea');ta.value = value ?? '';ta.style.position = 'absolute';ta.style.opacity = '0';document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove();};

navigation.clipboard

上面说的是以前的方式，前几天在看 vueuse 源码的时候，发现了一个复制粘贴的 api，是 navigation 上的 clipboard

writeText

navigation.clipboard.writeText 是一个异步方法，用来将特定的值复制起来，方便你去别的地方粘贴，具体的用法如下

<body><div><button id="btn">复制</button><input id="input" /></div><script>const btn = document.getElementById('btn')const input = document.getElementById('input')let value = ''btn.onclick = async () => {await navigator.clipboard.writeText(value);}input.oninput = (e) => {value = e.target.value}</script>
</body>

就能实现复制，并且可以 ctrl + v 进行粘贴

readText

navigation.clipboard.writeText 是一个异步方法，用来粘贴你刚刚复制的值

<body><div><button id="copy">复制</button><input id="input" /></div><div><button id="paste">粘贴</button><span id="span"></span></div><script>const copy = document.getElementById('copy')const paste = document.getElementById('paste')const input = document.getElementById('input')const span = document.getElementById('span')let value = ''copy.onclick = async () => {await navigator.clipboard.writeText(value);}paste.onclick = async () => {span.innerHTML = await navigator.clipboard.readText()}input.oninput = (e) => {value = e.target.value}</script>
</body>

相关文章：

JS 方法实现复制粘贴

背景 以前我们一涉及到复制粘贴功能&#xff0c;实现思路一般都是&#xff1a; 创建一个 textarea 标签 让这个 textarea 不可见&#xff08;定位&#xff09; 给这个 textarea 赋值 把这个 textarea 塞到页面中 调用 textarea 的 select 方法 调用 document.execCommand…...

编程日记 2023/9/6 13:29:30

后端面试话术集锦第 十六 篇：java锁面试话术

这是后端面试集锦第十六篇博文——java锁面试话术❗❗❗ 1. 介绍一下乐观锁和悲观锁 乐观锁的话就是比较乐观，每次去拿数据的时候，认为别人不会修改，所以不会上锁，但是在更新的时候会判断一下在此期间别人有没有去更新这个数据，可以使用版本号机制或者CAS算法实现。 乐观…...

编程日记 2023/9/6 13:28:29

SystemVerilog 第5章 面向对象编程基础

5.1概述 对结构化编程语言,例如 Verilog和C语言来讲,它们的数据结构和使用这些数据结构的代码之间存在很大的沟壑。数据声明、数据类型与操作这些数据的算法经常放在不同的文件里,因此造成了对程序理解的困难。 Verilog程序员的境遇比C程序员更加棘手,因为Ⅴ erilog语言…...

编程日记 2023/9/6 13:27:28

指针进阶（1）

指针进阶 朋友们&#xff0c;好久不见&#xff0c;这次追秋给大家带来的是内容丰富精彩的指针知识的拓展内容&#xff0c;喜欢的朋友们三连走一波&#xff01;&#xff01;&#xff01; 字符指针 在指针的类型中我们知道有一种指针类型为字符指针 char* &#xff1b; 使用方法如…...

编程日记 2023/9/6 13:26:26

蝶形运算法

蝶形运算法是一种基于FFT&#xff08;Fast Fourier Transform&#xff09;算法的计算方法&#xff0c;其基本思想是将长度为N的DFT分解成若干个长度为N/2的DFT计算&#xff0c;并通过不断的合并操作得到最终的结果。该算法也称为“蝴蝶算法”&#xff0c;因为它的计算过程中需要…...

编程日记 2023/9/6 13:25:25

day 48|● 583. 两个字符串的删除操作 ● 72. 编辑距离

583. 两个字符串的删除操作 dp的含义&#xff1a;指0开头&#xff0c;i- 1和j - 1为结尾的两个序列的删除最小数 递推公式方面&#xff1a; 初始化方面&#xff1a;前面0行和0列的初值要赋好 func minDistance(word1 string, word2 string) int {dp : make([][]int, len(wor…...

编程日记 2023/9/6 13:24:24

服务器（I/O）之多路转接

五种IO模型 1、阻塞等待&#xff1a;在内核将数据准备好之前&#xff0c;系统调用会一直等待。所有的套接字&#xff0c;默认都是阻塞方式。 2、非阻塞等待&#xff1a;如果内核没有将数据准备好&#xff0c;系统调用仍然会返回&#xff0c;并且会返回EWUOLDBLOCK或者EAGAIN错…...

编程日记 2023/9/6 13:23:23

后端面试话术集锦第 十三 篇：java集合面试话术

这是后端面试集锦第十三篇博文——java集合面试话术❗❗❗ 1. Java里常见的数据结构都有哪些以及特征 数组 数组是最常用的数据结构。 数组的特点是长度固定，可以用下标索引，并且所有的元素的类型都是一致的。 列表 列表和数组很相似，只不过它的大小可以改变。 列表一般都是…...

编程日记 2023/9/6 13:22:21

《微服务架构设计模式》第一章

逃离单体地狱 FTGO单体架构 ​​​​​​​作者用国外FTGO公司&#xff08;一家做线餐饮外卖&#xff09;的应用程序举例&#xff0c;阐述了单体架构的优缺点。FTGO应用架构如下&#xff1a; 应用程序是单体应用&#xff0c;具有六边形架构&#xff0c;最内侧是业务逻辑&…...

编程日记 2023/9/6 13:21:21

前端是如何打包的

前端项目的打包过程通常涉及将多个源文件&#xff08;包括HTML、CSS、JavaScript等&#xff09;合并、优化和压缩&#xff0c;以生成最终用于生产环境的静态资源。这个过程可以使用构建工具和打包工具来自动化完成。以下是前端项目的常见打包步骤&#xff1a; 1. **源代码编写…...

编程日记 2023/9/6 13:20:19

Qt 5.15编译（MinGW）及集成Crypto++ 8.7.0笔记

一、背景 为使用AES加密库&#xff08;AES/CBC加解密&#xff09;&#xff0c;选用Crypto 库&#xff08;官网&#xff09;。   最新Crypto C库依次为&#xff1a;8.8.0版本&#xff08;2023-6-25&#xff09;、8.7.0&#xff08;2022-8-7&#xff09;和8.6.0&#xff08;202…...

编程日记 2023/9/6 13:19:17

Qt 简单闹钟

//wiget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTime> //时间类 #include <QTimer> //定时器类 #include <QTextToSpeech> #include <QDebug> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPA…...

编程日记 2023/9/6 13:18:15

简单谈下Spring、Spring MVC和Spring Boot

Spring是一个开源的轻量级框架&#xff0c;用于构建Java应用程序。它提供了一种全面的编程和配置模型&#xff0c;可以帮助开发人员构建各种类型的应用程序&#xff0c;从简单的控制台应用程序到大型企业级应用程序。Spring框架的主要目标是提高应用程序的可维护性、可扩展性和…...

编程日记 2023/9/6 13:17:11

利用python进行视频下载并界面播放快速下载素材

工具&#xff1a;python designer&#xff08;python自带&#xff09;:UI界面设计工具 VLC&#xff1a;视频播放工具 需要的库如下&#xff1a; import os,platform os.environ[PYTHON_VLC_MODULE_PATH] "./vlc-3.0.14" import vlc from 脚本 import Player from …...

编程日记 2023/9/6 13:16:11

[C++][pcl]pcl安装后测试代码3

测试环境&#xff1a; vs2019 pcl1.12.1 代码&#xff1a; #include<iostream> #include <thread>#include <pcl/common/common_headers.h> #include <pcl/features/normal_3d.h> #include <pcl/io/pcd_io.h> #include <pcl/visualizatio…...

编程日记 2023/9/6 13:15:09

在WSL下使用makefile运行modelsim进行混合编译

modelsim的图像界面加载缓慢&#xff0c;实际上modelsim可以在纯命令行环境下仿真&#xff0c;使用-c参数:vsim -c。可以在WSL下用makefile运行Windows下的modelsim&#xff1a; HDL_CODE . HDL_CODE ../../rtl/ MODELSIM_ROOT : /mnt/e/exe/modeltech64_10.4/win…...

编程日记 2023/9/6 13:14:07

idea 常用插件和常用快捷键 - 记录

idea 常用插件 记得下载插件完成后&#xff0c;点击 Apply 和 OK Alibaba Java Coding Guidelines 作用&#xff1a;使用该插件可以&#xff0c;自动提示相关的语法格式问题&#xff0c;格式参考 阿里巴巴代码规范 详情链接&#xff1a; 代码规范之Alibaba Java Coding G…...

编程日记 2023/9/6 13:13:05

IDEA报错：Plugin ‘org.springframework.boot:spring-boot-maven-plugin:‘ not found

问题&#xff1a; 使用IDEA新建spring boot项目&#xff0c;报错如下&#xff1a; Plugin org.springframework.boot:spring-boot-maven-plugin: not found解决办法&#xff1a; 1.在本地maven仓库中找到spring-boot-maven-plugin的版本号 2.在pom.xml文件中添加对应的版本…...

编程日记 2023/9/6 13:12:04

C++——Vector：push_back和emplace_back的区别，测试写入1GB大数据时的性能差距

什么是emplace_back emplace_back是C11引入的STL容器成员函数。emplace操作只执行构造而不执行拷贝构造。 如何理解上面这句话&#xff1f;先来看一个场景。 class test { public:test(){}test(int i){ std::cout << "test(int i)" << std::endl; }tes…...

编程日记 2023/9/6 13:11:03

C/C++/QT/Python/MATLAB获取文件行数的示例

1. C获取文件行数 #include <stdio.h>int main() {FILE *file fopen("path/to/your/file.txt", "r");if (file NULL) {printf("Failed to open the file!\n");return 0;}int lineCount 0;char ch;while ((ch fgetc(file)) ! EOF) {if…...

编程日记 2023/9/6 13:10:01

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/9/5 11:26:05

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/1 18:08:39

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/8 1:38:37

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/8/21 19:34:21

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/8/13 4:43:34

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/8/8 2:02:16

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/9/6 14:32:13

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/2 23:34:19

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57