首页 > 其他分享 >js/jquery:5行代码实现点击按钮复制文字到剪贴板

js/jquery:5行代码实现点击按钮复制文字到剪贴板

时间:2024-03-26 17:32:43浏览次数:23  
标签:jquery 文字 剪贴板 temp 元素 body js input document

 方法1:

<p id="p1">Hello, I'm TEXT 1</p>
<button onclick="copyToClipboard_js('p1')">复制文字1 (js)</button>
<script>
function copyToClipboard_js(element) {
  var temp = document.createElement("input"); //声明创建一个input元素
  var txt = document.getElementById(element).innerHTML; //获得要复制的文字
  document.body.appendChild(temp); //在body中追加input元素
  temp.value = txt; //把要复制的文字赋予input元素
  temp.select(); //选择要复制的文字
  document.execCommand("copy"); //把文字复制到剪贴板
  document.body.removeChild(temp); //移除body追加的input元素
}
</script>

代码分析

请看JS注释文字。思路是在body追加一个input元素,然后把要复制的文字赋予该input元素里,再使用select()方法选择input元素里的文字,最后使用document.execCommand("copy");方法把文字复制到剪贴板。

思路逻辑不复杂,实现起来也容易。

方法2:



标签:jquery,文字,剪贴板,temp,元素,body,js,input,document
From: https://blog.csdn.net/mo3408/article/details/137052561

相关文章

  • js 非常好用且优雅的步骤校验、提交校验、自定义校验写法
    很多form表单和其它场景,在提交前或进入下一步前需要校验逻辑,这里总结了一个通用方法: constform={name:'',age:20,time:['2100-01-01','2100-01-01']}constvalidForm=()=>{//校验状态总结let......
  • 37.html+css+js网页设计实例/“音乐”酒吧主题介绍/web前端期末大作业/
    一、前言本实例以“音乐”酒吧为主题设计,响应式web,应用html+css+js,包括图片轮翻效果、视频、音频、留言板等,供大家参考。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交......
  • js使用正则从字符串中取出img标签
    要使用正则表达式从字符串中提取<img>标签,您可以使用以下代码:conststr=`Sometext<imgsrc="image.jpg"alt="Image">andmoretext<imgsrc="another.png"alt="Another">`;constregex=/<img[^>]*>/g;constimgTags......
  • 【附源码】Node.js毕业设计个人健康信息记录移动应用app(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着科技的进步和互联网的普及,移动应用已经成为人们日常生活中不可或缺的一部分。在健康管理领域,个人健康信息记录移动应用APP的开发和应用也日益受到关注......
  • 【附源码】Node.js毕业设计个人健康管理小助手(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:随着社会节奏的加快和工作压力的增大,个人健康管理成为了人们日益关注的焦点。传统的健康管理方式往往需要用户手动记录健康数据,如饮食、运动、睡眠等,然后进......
  • 【附源码】Node.js毕业设计个人财务管理系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今社会,随着经济的快速发展和人们生活水平的提高,个人财务管理已经成为了我们生活中不可或缺的一部分。无论是日常生活的消费记录、投资理财,还是购房、购......
  • 代码随想录算法训练营第二十七天|●39. 组合总和 ● 40.组合总和II ● 131.分割回文串
    39组合总和题目链接/文章讲解:https://programmercarl.com/0039.%E7%BB%84%E5%90%88%E6%80%BB%E5%92%8C.html视频讲解:https://www.bilibili.com/video/BV1KT4y1M7HJ一开始自己写的大概和答案差不多,但是弄不明白回溯要传递的参数,但是自己一开始想到了终止条件,如果>7了就......
  • ssm基于Vue.js的在线购物系统的设计与实现论文
    毕业设计(论文)在线购物系统学院专业班级学号用户姓名指导教师完成日期年月日摘要随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于在线购物系统当然也不能排除在外,随着网络技术的不断成熟,带动了在线购物系统,它彻......
  • 消失的留言(HTML中用JS实现)
    学习目标:提示:这里可以添加学习目标例如:一周掌握Java入门知识学习内容:掌握延时函数的使用掌握JavaScript控制css属性的方法学习:提示:这里可以添加计划学习的时间例如:框架+文字<!DOCTYPEhtml><htmllang="zH-Hans"><head><metacharset="UTF-8"><metaname=......
  • 【御控】JavaScript JSON结构转换(1):对象To对象——键值互换
    文章目录一、JSON是什么?二、JSON结构转换是什么?三、核心构件之转换映射四、案例之《JSON对象ToJSON对象》五、代码实现六、在线转换工具七、技术资料一、JSON是什么?Json(JavaScriptObjectNotation)产生于20世纪90年代初,最初由道格拉斯·克罗克福特(DouglasCrockfo......