bugfix> javascript > 投稿

Hiiはjavascriptを初めて使用しますが、全力を尽くして、テキストをコピーするjavascriptを作成しました。 <p></p> 要素。私のウェブサイトでは、コピーボタンが何度も必要です。しかし、私のjavascriptは1つのコピーボタンでしか機能しません。別のコピーボタンに使用すると、最初のボタンのそれぞれがコピーされます <p>/p> テキスト。私のJavaScript

const copyButton = document.querySelector('.copyButton');
const copyalert = document.querySelector('.copyalert');
copyButton.addEventListener('click', copyClipboard);
function copyClipboard() {
  var copystatus= document.getElementById("randomstatus");
// for Internet Explorer
  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(copystatus);
    range.select();
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
  else if(window.getSelection) {
// other browsers
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copystatus);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    copyalert.classList.add("show");
    setTimeout(function() {copyalert.classList.remove("show")},700);
  }
}

私のhtml

<div>
   <h2 class="statusheading">Latest English quotes</h2>
  <div id="englishquotes">
   <div class="latestquotes">
       <p class=latest>life os good when hou have books</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
</div>
<div class="latestquotes">
       <p class=latest>Google is a open source library</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
<div class="latestquotes">
       <p class=latest>Cat is better than dog</p>
       <button class="copyButton btn">Copy</button>
          <span class="copyalert">Copied!</span>
   </div>
  </div>
  </div>

回答 2 件
  • コピーしたいテキストのIDをシステムに知らせる必要があります。 p1、p2、p3。

    これを試してみてください

    <div>
       <h2 class="statusheading">Latest English quotes</h2>
      <div id="englishquotes">
       <div class="latestquotes">
           <p><div id=p1>life os good when hou have books</div></p> 
           <button class="copyButton btn" onclick="copyToClipboard('p1')">Copy</button>
    </div>
     
    <div class="latestquotes">
           <p><div id=p2>Google is a open source library</div></p>
           <button class="copyButton btn" onclick="copyToClipboard('p2')">Copy</button>
       </div>
     
    <div class="latestquotes">
           <p><div id=p3>Cat is better than dog</div></p>
           <button class="copyButton btn" onclick="copyToClipboard('p3')">Copy</button>
       </div>
      </div>
      </div>
    
    <script>
    
    function copyToClipboard(var1){
        let val = document.getElementById(var1).innerHTML;
        const selBox = document.createElement('textarea');
        selBox.style.position = 'fixed';
        selBox.style.left = '0';
        selBox.style.top = '0';
        selBox.style.opacity = '0';
        selBox.value = val;
        document.body.appendChild(selBox);
        selBox.focus();
        selBox.select();
        document.execCommand('copy');
        document.body.removeChild(selBox);
        alert('text copied to clipboard, please use Ctrl-V to paste the data');
      }  
    
    </script>
    
    

  • テキスト領域を作成し、本文に追加してexecCommand関数を適用する必要があります。次に、DOMからテキスト領域を削除して、次のことを試してください。

    function copyToClipboard(){
        let val = 'text to copy';
        const selBox = document.createElement('textarea');
        selBox.style.position = 'fixed';
        selBox.style.left = '0';
        selBox.style.top = '0';
        selBox.style.opacity = '0';
        selBox.value = val;
        document.body.appendChild(selBox);
        selBox.focus();
        selBox.select();
        document.execCommand('copy');
        document.body.removeChild(selBox);
        alert('text copied to clipboard');
      }
    
    
    <button type=button onclick="copyToClipboard()">Copy</button>
    
    

あなたの答え