首页 > 其他分享 >JS如何实现点击复制功能,JS点击复制文本

JS如何实现点击复制功能,JS点击复制文本

时间:2024-04-06 20:01:21浏览次数:23  
标签:text 文本框 JS 点击 复制 document

div,p等标签不可以,建一个文本框标签,不能给display:none; 我们需要对他进行一个定位,让透明看不见找不到,点击复制,将需要复制的内容赋值给文本框,接着对文本框进行全选,在进行复制操作即可

<p id="content">博客园</p>
<textarea id="text" style="position: fixed;top: 10000px;left: 10000px;opacity: 0;"></textarea>
<button id="CopyBtn">点击复制</button>
<script>
    var content = document.getElementById("content").innerText;
    var text = document.getElementById("text");
    var CopyBtn = document.getElementById("CopyBtn");
    CopyBtn.onclick = function(){
        // 将需要复制的内容赋值给文本框
        text.value = content;
        // 选中文本框的内容
        text.select();
        // 对选中的内容进行复制
        document.execCommand("copy");
    }
</script>

  

标签:text,文本框,JS,点击,复制,document
From: https://www.cnblogs.com/nweb/p/18117843

相关文章

  • FJSP:蜣螂优化算法( Dung beetle optimizer, DBO)求解柔性作业车间调度问题(FJSP),提供MAT
    一、柔性作业车间调度问题柔性作业车间调度问题(FlexibleJobShopSchedulingProblem,FJSP),是一种经典的组合优化问题。在FJSP问题中,有多个作业需要在多个机器上进行加工,每个作业由一系列工序组成,每个工序需要在特定的机器上完成。同时,每个机器一次只能处理一个工序,且每个工......
  • FJSP:霸王龙优化算法(Tyrannosaurus optimization,TROA)求解柔性作业车间调度问题(FJSP),提供
    一、柔性作业车间调度问题柔性作业车间调度问题(FlexibleJobShopSchedulingProblem,FJSP),是一种经典的组合优化问题。在FJSP问题中,有多个作业需要在多个机器上进行加工,每个作业由一系列工序组成,每个工序需要在特定的机器上完成。同时,每个机器一次只能处理一个工序,且每个工......
  • JS 中的函数 this 指向总结
    这个js语言中的this和其他面向对象的语言有本质的不同,也更复杂,它更多取决于函数在不同场景下的调用方式,要理解它并总结出它的规律的话,优先要从上下文这个概念认知说起.理解上下文上下文context可理解为程序执行时的背景环境,包含了在特定时刻程序所需要的所有......
  • 基于SSM+Jsp+Mysql的个性化影片推荐系统
    开发语言:Java框架:ssm技术:JSPJDK版本:JDK1.8服务器:tomcat7数据库:mysql5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:Maven3.3.9系统展示系统首页用户注册用户登录热门电影个人中心我的收藏新闻资讯管理员登录管理员首页用户管......
  • 告别复制粘贴,文件夹名称一键替换
    在数字化发展全面的现代,我们经常使用那些形形色色的电子设备和程序进行文件的管理。然而,在日常使用中,我们常常陷入一种重复劳动的困境——复制粘贴。每当需要修改大量相似文件的名称时,这种重复的操作无疑让人疲惫。好在,现在有了一键替换文件夹名称的方法,它如同神一般降临,让我们......
  • JsonCpp 笔记: 读写 Json 文件
    JsonCpp笔记:读写Json文件完成时间:2024-04-06本文主要介绍使用JsonCpp读写Json文件,JsonCpp是C++上的一个Json处理库Json的语法如果熟悉Json语法,此部分可以跳过Json包含两种结构:对象(object),它是键值对的集合(key:value)有序数组(array)......
  • JS——webAPIs(6)
    一、知识点1.正则表达式的使用//正则表达式:用于匹配字符串中字符组合的模式conststr='学习前端'//定义规则constreg=/前端///进行查找-两个方法//用于判断是否有符合规则的字符串,返回布尔值console.log(reg.test(str));//用于......
  • 蓝旭工作室第三周预习:JS入门
    一、JavaScript概述    JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言。    解释型:运行之前不需要编译;运行之前不会检查错误,直到碰到错误为止。    编译型:对源码进行编译,还能检查语法错误。如C、C++。运行环境    1、......
  • Vue.js自定义指令
    除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时,元素获得焦点:<body><divclass="app"><span>页面载入时,input元素自动获取焦点:</span><inputv-focust......
  • 比nestjs更优雅的ts控制反转策略-依赖查找
    一、Cabloy5.0内测预告Cabloy5.0采用TS对整个全栈框架进行了脱胎换骨般的大重构,并且提供了更加优雅的ts控制反转策略,让我们的业务开发更加快捷顺畅1.新旧技术栈对比:后端前端旧版js、egg2.0、mysqljs、vue2、framework7新版ts、egg3.0、多数据库兼容(支持mysql......