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

JS 方法实现复制粘贴

news 2026/2/1 11:28:55

背景

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

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

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/1 6:19:23

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/11/26 13:15:57

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/1/26 20:04:23

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/1/17 20:28:31

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/12/16 7:53:39

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2026/1/23 0:35:20