时间戳

首页 > 解决方案 > 通过 Javascript 代码成功复制时显示复制的工具提示

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

问题描述

首先，我是 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>

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

帮助表示赞赏！:)

标签： javascripthtmlcopy

解决方案

像这样将您的工具提示 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();  
  });

推荐阅读