热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用javascript将文本从div复制到剪贴板

如何解决《使用javascript将文本从div复制到剪贴板》经验,为你挑选了1个好方法。

我正在尝试使用将文本从下一个div复制到剪贴板Javascript。下面是我当前的代码:

HTML:

1
2
3
4
5
6
7
8

Javascript:

$(".btnFileCopy").click(function () {
    var copyText = document.getElementsByClassName("hl7MsgBox");
    copyText.select();
    document.execCommand("copy");
});

我期望将新输出粘贴到中时得到notepad

1
2
3
4
5
6
7
8

但是,由于某种原因,它无法正常工作并抛出下一条错误消息:

未捕获的TypeError:copyText.select不是函数...

有谁知道我该如何解决这个问题?



1> Shidersz..:

首先,一些参考:

getElementsByClassName()Document接口的方法返回具有所有给定类名的所有子元素的类似数组的对象。在文档对象上调用时,将搜索完整的文档,包括根节点。您也可以调用getElementsByClassName()任何元素;它只会返回具有给定类名的指定根元素的后代元素。

因此,在您的特定情况下,该copyText变量将包含一个元素数组(那些hl7MsgBox在文档元素下具有类的元素)。现在,由于在您的情况下该类只有一个元素,因此您可以使用进行访问,并使用来copyText[0]包装它的所有文本copyText[0].textContent。总而言之,您可以执行下一步以获取要复制的文本:

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;

另一种可能性是使用方法querySelector():

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果找不到匹配项,null则返回。

使用该querySelector()方法,您可以简单地执行以下操作:

var copyText = document.querySelector(".hl7MsgBox").textContent;

最后,我们可以创建一个称为copyToClipBoard()的通用方法,其唯一的工作就是将接收string到的信息复制到剪贴板,然后使用纯净的代码重新排列代码,Javascript如下所示:

var elems = document.getElementsByClassName("hl7MsgBox");
var copyText = elems[0].textContent;
var copyText = document.querySelector(".hl7MsgBox").textContent;

推荐阅读
  • JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • [JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
    [JavaScript]多数前端工程师都没注意到的一个关于console.log()的坑请阅读以下代码并猜测结果:functiontest(){le ... [详细]
  • Whyusingstringsaskeysofarray,consoleisshowingthatarraywithoutthesedeclaredvaluesand ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • 表单提交前的最后验证:通常在表单提交前,我们必须确认用户是否都把必须填选的做了,如果没有,就不能被提交到服务器,这里我们用到表单的formname.submit()看演示,其实这个对于我们修炼道 ... [详细]
  • Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • javascript如何判断值是否为undefined
    这篇文章主要介绍“javascript如何判断值是否为undefined”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ja ... [详细]
  • 但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法:一:跳转到新页面,并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]
  • javascript函数中参数传递问题示例探讨-相信每一位刚接触javascript的同学在函数参数传递上都会很疑惑,原因无他,那就是它的语法太怪异了,你定义一个函数例如funct ... [详细]
author-avatar
二不-不二
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有