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

JS 方法实现复制粘贴

news 2026/3/30 23:10:04

背景

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

  • 创建一个 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

3步学会BilibiliDown：零基础掌握B站视频下载的终极指南

3步学会BilibiliDown&#xff1a;零基础掌握B站视频下载的终极指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/3/30 22:42:02

Zotero效率翻倍！Zutilo插件保姆级配置指南（附我常用的10个快捷键方案）

Zotero效率革命&#xff1a;用Zutilo插件打造键盘流文献工作流 每天面对数百篇文献&#xff0c;你是否厌倦了在鼠标和键盘间反复切换&#xff1f;科研老手都知道&#xff0c;真正的效率提升往往来自那些能减少手指移动距离的微小优化。Zutilo正是Zotero生态中那个被严重低估的…...

编程新知 2026/3/30 20:12:25

5分钟掌握防撤回神器：让重要消息无处可逃

5分钟掌握防撤回神器&#xff1a;让重要消息无处可逃 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁&#xff08;我已经看到了&#xff0c;撤回也没用了&#xff09; 项目地址: https://gitcode.com/GitHub_Tre…...

编程新知 2026/3/30 20:04:24

突破国际漫游限制：Nrfr免Root工具的终极解决方案

突破国际漫游限制&#xff1a;Nrfr免Root工具的终极解决方案 【免费下载链接】Nrfr &#x1f30d; 免 Root 的 SIM 卡国家码修改工具 | 解决国际漫游时的兼容性问题&#xff0c;帮助使用海外 SIM 卡获得更好的本地化体验&#xff0c;解锁运营商限制&#xff0c;突破区域限制 …...

编程新知 2026/3/30 19:33:39

5步让Windows 11提速51%：Win11Debloat深度净化指南

5步让Windows 11提速51%&#xff1a;Win11Debloat深度净化指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以简化和改善…...

编程新知 2026/3/30 19:33:32

终极LoRaWAN服务器搭建指南：如何快速构建你的私有物联网网络

终极LoRaWAN服务器搭建指南&#xff1a;如何快速构建你的私有物联网网络 【免费下载链接】lorawan-server Compact server for private LoRaWAN networks 项目地址: https://gitcode.com/gh_mirrors/lo/lorawan-server 你是否想拥有一个完全可控的LoRaWAN物联网平台&…...

编程新知 2026/3/30 18:52:56

从1M到1T1M：忆阻器阵列结构演进史及其在AI芯片中的应用前景

从1M到1T1M&#xff1a;忆阻器阵列结构演进史及其在AI芯片中的应用前景 在半导体技术持续突破的今天&#xff0c;忆阻器阵列正以其独特的物理特性重新定义计算架构的边界。这种兼具存储与计算能力的纳米级器件&#xff0c;正在神经网络加速领域展现出颠覆性潜力。本文将带您穿越…...

编程新知 2026/3/30 16:59:49

OpenWrt固件下载与配置教程：R5S设备从入门到精通

OpenWrt固件下载与配置教程&#xff1a;R5S设备从入门到精通 【免费下载链接】openwrt openwrt编译更新库X86-R2C-R2S-R4S-R5S-N1-小米MI系列等多机型全部适配OTA自动升级 项目地址: https://gitcode.com/GitHub_Trending/openwrt5/openwrt GitHub_Trending/openwrt5/op…...

编程新知 2026/3/30 15:34:48

KittenTTS终极指南：如何在CPU上实现25MB轻量级TTS语音合成

KittenTTS终极指南&#xff1a;如何在CPU上实现25MB轻量级TTS语音合成 【免费下载链接】KittenTTS State-of-the-art TTS model under 25MB &#x1f63b; 项目地址: https://gitcode.com/gh_mirrors/ki/KittenTTS KittenTTS是一款革命性的轻量级文本转语音工具&#…...

编程新知 2026/3/30 14:54:37

AI辅助学术写作：Qwen3-0.6B-FP8搭配LaTeX生成论文章节与参考文献

AI辅助学术写作&#xff1a;Qwen3-0.6B-FP8搭配LaTeX生成论文章节与参考文献 写论文&#xff0c;尤其是写引言和参考文献&#xff0c;是不是让你特别头疼&#xff1f;对着空白的文档发呆&#xff0c;不知道从何下笔&#xff1b;或者为了找一篇关键的参考文献&#xff0c;在数据…...

编程新知 2026/3/30 14:42:21