通过 Javascript 代码成功复制时显示复制的工具提示答案

【问题标题】：Show Copied Tooltip When Successfully Copied Through Javascript Code通过 Javascript 代码成功复制时显示复制的工具提示
【发布时间】：2021-02-27 14:42:35
【问题描述】：

首先我是 javascript/HTML 的初学者，并成功创建了一个复制函数，其中的值是

标签在按钮按下时被复制。

这是目前为止的代码：

Javascript：

<script>
    var copyEmailBtn = document.querySelector('.emoji-copy-button');  
  copyEmailBtn.addEventListener('click', function(event) {  
    // Select the email link anchor text  
    var emailLink = document.querySelector('.emoji-copy');  
    var range = document.createRange();  
    range.selectNode(emailLink);  
    window.getSelection().addRange(range);  
  
    try {  
      // Now that we've selected the anchor text, execute the copy command  
      var successful = document.execCommand('copy');  
      var msg = successful ? 'successful' : 'unsuccessful';  
      console.log('Copy email command was ' + msg);  
    } catch(err) {  
      console.log('Oops, unable to copy');  
    }  
  
    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported  
    window.getSelection().removeAllRanges();  
  });
  </script>

HTML：

<div class="copy-emoji-section">
<p class="emoji-copy-text" id="">Copy Emoji</p>
<p class="emoji-copy" id="emoji_copy">????</p>
<button class="emoji-copy-button" id="emoji_copy_button">Copy Emoji</button>
</div>

复制功能可以正常工作，但我想在该文本字段下方显示一个工具提示，说明内容已被复制。我不知道如何使它工作

感谢您的帮助！ :)

【问题讨论】：

标签： javascript html copy

【解决方案1】：

像这样将你的工具提示 HTML 放在父 div 中 -

<div class="copy-emoji-section">
  <div>
    <p class="emoji-copy-text" id="">Copy Emoji</p>
    <p class="emoji-copy" id="emoji_copy">?</p>
    <button class="emoji-copy-button" id="emoji_copy_button">Copy Emoji</button>
  </div>
  <div class="your-tooltip">...</div>
</div>

风格

.copy-emoji-section {
  position: relative;
}

.your-tooltip {
  opacity: 0;
  position: absolute;
  bottom:0;
  transition: all .3s;
}
 
.your-tooltip.show {
  opacity: 1;
}

在你的 js 中，你需要像这样将 .show 类附加到 .your-tooltip html：

    var copyEmailBtn = document.querySelector('.emoji-copy-button');
    var yourToolTip = document.querySelector('.your-tooltip');

    copyEmailBtn.addEventListener('click', function(event) {  
      // Select the email link anchor text  
      var emailLink = document.querySelector('.emoji-copy');  
      var range = document.createRange();  
      range.selectNode(emailLink);  
      window.getSelection().addRange(range);  
  
      try {  
        // Now that we've selected the anchor text, execute the copy command  
        var successful = document.execCommand('copy');  
        var msg = successful ? 'successful' : 'unsuccessful';

        // Add the .show class when successful.
        if(successful){
          yourToolTip.classList.add('.show');
        }
    
        console.log('Copy email command was ' + msg);  
      } catch(err) {  
        console.log('Oops, unable to copy');  
      }  
  
      // Remove the selections - NOTE: Should use
      // removeRange(range) when it is supported  
      window.getSelection().removeAllRanges();  
  });

【讨论】：