如何从JavaScript的段落元素中复制文本?

阿卡什·卡玛特(Akash Kamath)

嘿,我是一位新开发人员,正在尝试建立一个网站。网站的主要目标是向访问者提供一段文字。我的一些帮手给了我一个JavaScript,用于在<p></p>元素内复制文本但这不起作用。<p></p>单击按钮时不会复制内的文本。以某种方式,如果您知道答案,请使用我的常量,有效值和其他值。我的Javascript

 var buttons = document.getElementsByClassName('copystatus');

for (let button of buttons) {
  button.addEventListener('click', function() {
     let statusElement = this.closest('.latestatus');
     let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
    
    copyTextToClipboard(textToCopy);
    addCopyStatusAlert(this.parentNode);
  });
}

function copyTextToClipboard(text) {
  const copyText = document.createElement('textarea');
  copyText.style.position="absolute";
  copyText.style.display="none";
  copyText.value = text;

  document.body.appendChild(copyText);
  copyText.select();
  document.execCommand('copy');
  document.body.removeChild(copyText);
}

function addCopyStatusAlert(element) {
  if (!element.getElementsByClassName('status-copy-alert').length) {
    let copyAlertElement = document.createElement('span');
    copyAlertElement.classList.add('status-copy-alert')
    let copyMessage = document.createTextNode('Copied!');
    copyAlertElement.appendChild(copyMessage);

    element.appendChild(copyAlertElement);
    setTimeout(function() {
      element.removeChild(copyAlertElement);
    }, 700);
  }
}

我的HTML

<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
   <div class="allStatus">
    <div class="bock">
     <div class="latestatus">
      <p class="copytxt">Life is good when you have books</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
     <div class="latestatus">
      <p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
    </div>
    <div class="block">
     <div class="latestatus">
      <p class="copytxt">Cats are better than dogs.</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
     <div class="latestatus">
      <p class="copytxt">Cats are better than dogs.</p>
      <div>
       <button class="copystatus btn">Copy</button>
      </div>
     </div>
    </div>
   </div>
  </div>

请优化代码,以便在<p></p>单击相应按钮时可以复制元素内部的文本

另外,任何人都可以修改上面的代码,这样我就不需要为<p></p>。(可选)重复讲课

扎克

您需要将文本绘制到屏幕上,以便可以选择它,尝试删除copyText.style.display="none";,或用另一种方法替换它,例如:

copyText.style.left="-99999px";
copyText.style.zIndex="99999";

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用JavaScript在段落中获取文本

来自分类Dev

在HTML / JavaScript中,如何动态设置标题/段落元素的文本而不覆盖其他内容?

来自分类Dev

如何在HTML <p>(段落)元素中获取文本

来自分类Dev

从段落中搜索文本-Javascript?

来自分类Dev

如何在段落元素中提取文本?

来自分类Dev

使用硒,如何在嵌套在div元素中的段落中选择文本?

来自分类Dev

如何限制段落中的文本长度

来自分类Dev

如何在段落中对齐UILabel文本

来自分类Dev

如何从输入中复制文本

来自分类Dev

Postgres:如何将文本数组列中的元素复制到 json 列中?

来自分类Dev

如何在jointJS的元素框中复制检查器编辑文本值-Rappid

来自分类Dev

如何从JavaScript中动态创建的元素获取文本

来自分类Dev

如何更改 HTML 文档中 Javascript 元素的文本颜色

来自分类Dev

如何使用javascript显示段落中的代码

来自分类Dev

如何使用JavaScript将HTML段落分成其文本行

来自分类Dev

如何从jQuery中的段落中删除不需要的元素

来自分类Dev

HTML / JavaScript:如何从iframe复制文本

来自分类Dev

如何用Python中的BeautifulSoup摆脱段落文本的封闭?

来自分类Dev

如何在bash中每个段落的开头插入文本

来自分类Dev

如何删除文本文件中的特定段落?

来自分类Dev

对于MacOS,如何删除多个文件中的文本(长段落)?

来自分类Dev

如何使用+ =删除添加到段落中的文本

来自分类Dev

如何计算 SQL 文本列中的段落数?

来自分类Dev

如何避免并排的两个段落中的文本重叠

来自分类Dev

如何在CSS中内联显示标题和段落元素?

来自分类Dev

如何从生成的pdf表中复制文本?

来自分类Dev

如何从生成的pdf表中复制文本?

来自分类Dev

如何在Java中复制元素?

来自分类Dev

如何复制js数组中的元素?

Related 相关文章

  1. 1

    如何使用JavaScript在段落中获取文本

  2. 2

    在HTML / JavaScript中,如何动态设置标题/段落元素的文本而不覆盖其他内容?

  3. 3

    如何在HTML <p>(段落)元素中获取文本

  4. 4

    从段落中搜索文本-Javascript?

  5. 5

    如何在段落元素中提取文本?

  6. 6

    使用硒,如何在嵌套在div元素中的段落中选择文本?

  7. 7

    如何限制段落中的文本长度

  8. 8

    如何在段落中对齐UILabel文本

  9. 9

    如何从输入中复制文本

  10. 10

    Postgres:如何将文本数组列中的元素复制到 json 列中?

  11. 11

    如何在jointJS的元素框中复制检查器编辑文本值-Rappid

  12. 12

    如何从JavaScript中动态创建的元素获取文本

  13. 13

    如何更改 HTML 文档中 Javascript 元素的文本颜色

  14. 14

    如何使用javascript显示段落中的代码

  15. 15

    如何使用JavaScript将HTML段落分成其文本行

  16. 16

    如何从jQuery中的段落中删除不需要的元素

  17. 17

    HTML / JavaScript:如何从iframe复制文本

  18. 18

    如何用Python中的BeautifulSoup摆脱段落文本的封闭?

  19. 19

    如何在bash中每个段落的开头插入文本

  20. 20

    如何删除文本文件中的特定段落?

  21. 21

    对于MacOS,如何删除多个文件中的文本(长段落)?

  22. 22

    如何使用+ =删除添加到段落中的文本

  23. 23

    如何计算 SQL 文本列中的段落数?

  24. 24

    如何避免并排的两个段落中的文本重叠

  25. 25

    如何在CSS中内联显示标题和段落元素?

  26. 26

    如何从生成的pdf表中复制文本?

  27. 27

    如何从生成的pdf表中复制文本?

  28. 28

    如何在Java中复制元素?

  29. 29

    如何复制js数组中的元素?

热门标签

归档