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

编程问答 2022-05-30

问题描述

您好，我是一名新开发人员，正在尝试构建一个网站。网站的主要目标是向访问者提供一段文字。我的一些助手给了我一个 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";
,

是的，我们应该删除 sheet(isPresented: $isImagePickerShown) { ImagePickerController(sourceType: self.sourceType,inputImage: self.$image,inputImageUrl: $imageURL) //I want to get the selected imageURL here to call uploadToServer() } 则代码将完美运行。 扎克的回答 谢谢你

dynamic-htmlhtmljavascriptscripting