前端实现点击复制内容到粘贴板功能

Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持。
复制时,先选中文本,然后调用document.execCommand(‘copy’),选中的文本就会进入剪贴板。

当需要选中的内容是文本输入标签(input、textarea)
如果是文本输入标签,标签不可以赋予disable或者readonly,这会影响select()方法

const input = document.querySelector('#input'); // 选取input元素
input.select(); // 选中文本
document.execCommand('copy'); // 执行浏览器复制命令
this.$message.success("已复制到粘贴板!");

当需要选中的内容不是文本输入标签(input、textarea)
需要主动创建一个可输入文本的标签(input和textarea)然后将待复制的文本赋值给这个标签,再调用.select()方法选中这个标签才能继续执行

const input = document.createElement("input"); // 新增一个input
input.style.position = "relative"; // 将它隐藏(注意不能使用display或者visibility,否则粘贴不上)
input.style.zIndex = "-9";
document.body.appendChild(input); // 追加
input.value = copyContent; //copyContent为需要复制的内容   设置文本框的内容
input.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
this.$message.success("已复制到粘贴板!");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729878.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法练习第十六天| 104.二叉树的最大深度、559. N 叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

优先掌握递归的方式 104.二叉树的最大深度 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode le…

大数据开发(Spark面试真题-卷一)

大数据开发(Spark面试真题) 1、什么是Spark Streaming?简要描述其工作原理。2、什么是Spark内存管理机制?请解释其中的主要概念,并说明其作用。3、请解释一下Spark中的shuffle是什么,以及为什么shuffle操作…

京东获得JD商品详情 API 返回值说明

jd.item_get 获取API测试 公共参数 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheStrin…

99.qt qml-单例程序实现

在之前讲过: 58.qt quick-qml系统托盘实现https://nuoqian.blog.csdn.net/article/details/121855993 由于,该示例只是简单讲解了系统托盘实现,并没有实现单例程序,所以多次打开后就会出现多个exe出现的可能,本章出一章QML单例程序实现, 多次打开始终只显示出第一个打开…

DiT:Scalable Diffusion Models with Transformers

TOC 1 前言2 方法和代码 1 前言 该论文发表之前,市面上几乎都是用卷积网络作为实际意义上的(de-facto)backbone。于是一个想法就来了:为啥不用transformer作为backbone呢? 文章说本论文的意义就在于揭示模型选择对于…

AI为什么需要GPU

人工智能(AI)需要GPU(图形处理单元)主要是因为深度学习模型的训练和推理过程需要大量的计算资源。GPU相比于传统的中央处理单元(CPU)在并行计算方面具有明显的优势,能够更有效地处理大规模的数据…

用python写一个自动进程守护,带UI

功能是指定程序关闭后自动重启,并点击1作为启动 原来的想法是群成员说的某软件打包后,软件进程被杀后,界面白屏。所以写了个计算器重启demo进行进程守护 import subprocess import time import pyautogui import psutil #用计算器做演示。 d…

WiFi模块助力敏捷办公:现代办公室的关键角色

随着信息技术的飞速发展,现代办公室正经历着一场数字化和智能化的变革。在这一变革过程中,WiFi模块作为无线通信技术的核心组成部分,扮演着关键的角色,为敏捷办公提供了强大的支持。本文将深入探讨WiFi模块在现代办公室中的关键角…

Spring Boot工作原理

Spring Boot Spring Boot 基于 Spring 开发,Spirng Boot 本身并不提供 Spring 框架的核心特性以及扩展功能,只是用于快速、敏捷地开发新一代基于 Spring 框架的应用程序。也就是说,它并不是用来替代 Spring 的解决方案,而是和 Spr…

安康杯安全知识竞赛上的讲话稿

各位领导、同志们: 经过近半个月时间的准备,南五十家子镇平泉首届安康杯安全生产知识竞赛初赛在今天圆满落下帏幕,经过紧张激烈的角逐, 代表队、 代表队和 代表队分别获得本次竞赛的第一、二、三名让我们以热烈的掌声表示祝…

指针的进阶小tips

前情提要 指针是变量,存地址(唯一)指针4/8个字节(32/64位平台)指针有类型,其类型决定指针整数的步长,指针解引用操作的时候的权限。指针的运算 字符指针 int main() {char am;char *pc&c…

使用插件vue-seamless-scroll 完成内容持续动态

1、安装插件 npm install vue-seamless-scroll --save 2、项目中引入 //单独引入import vueSeamlessScroll from vue-seamless-scrollexport default {components: { vueSeamlessScroll},}//或者在main.js引入import scroll from vue-seamless-scrollVue.use(scroll)3、页面使…

SRS服务器ffmpeg 推流rtmp超时中断

ffmpeg错误显示 failed to update header with correct duration failed to update header with correct filesize. Error writing trailer of rtmp://----- broken pipe SRS日志错误显示 serve error code2056 kickoffforidle : service cycle : rtmp stream service: timeou…

【 React 】super()和super(props)有什么区别

相关文章 react 中的 super super(props) 1. ES6类 在ES6中,通过extends关键字实现类的继承,方式如下: class sup{constructor(name){this.namename;}printName(){console.log(this.name)} } class sub extends sup{constructor(name,age)…

基于Pytorch搭建分布式训练环境

Pytorch系列 文章目录 Pytorch系列前言一、DDP是什么二、DPP原理terms、nodes 和 ranks等相关术语解读DDP 的局限性为什么要选择 DDP 而不是 DP代码演示1. 在一个单 GPU 的 Node 上进行训练(baseline)2. 在一个多 GPU 的 Node 上进行训练临门一脚&#x…

【深度学习笔记】稠密连接网络(DenseNet)

注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 5.12 稠密连接网络(DenseNet) ResNet中的跨层连接设计引申出了数个后续工作。本节我们介绍其中的一个&#xf…

5个实用的PyCharm插件

大家好,本文向大家推荐五个顶级插件,帮助开发人员提升PyCharm工作流程,将生产力飞升到新高度。 1.CodiumAI 安装链接:https://plugins.jetbrains.com/plugin/21206-codiumate--code-test-and-review-with-confidence--by-codium…

Windows上基于名称快速定位文件和文件夹的免费工具Everything

在Windows上搜索文件时,使用windows上内置搜索会很慢,这里推荐使用Everything工具进行搜索。 "Everything"是Windows上一款搜索引擎,它能够基于文件名快速定位文件和文件夹位置。不像Windows内置搜索,"Everything&…

[C++] C++函数的进化: 函数->函数指针->函数模板->仿函数(函数对象)->Lambda表达式

文章目录 前言C函数进化路线代码示例 前言 【C函数的进化 函数→函数指针→函数模板→仿函数|函数对象→lambda表达式】 观后笔记。 C函数进化路线 函数->函数指针->函数模板->仿函数&#xff08;函数对象&#xff09;->Lambda表达式 代码示例 #include <…

容器:Docker部署

docker 是容器&#xff0c;可以将项目的环境&#xff08;比如 java、nginx&#xff09;和项目的代码一起打包成镜像&#xff0c;所有同学都能下载镜像&#xff0c;更容易分发和移植。 再启动项目时&#xff0c;不需要敲一大堆命令&#xff0c;而是直接下载镜像、启动镜像就可以…