svip

原生javascript加css和html做一键复制功能。
效果如下截图：

javascript代码部分：

1. //一键复制
   
2. const copyBtn = document.querySelector('.copy-btn');
   
3. const content = document.querySelector('.content');
   
4. const handleCopy = () => {
   
5.   const range = document.createRange();
   
6.   range.selectNode(content);
   
7.   window.getSelection().removeAllRanges();
   
8.   window.getSelection().addRange(range);
   
9.   document.execCommand('copy');
   
10.   window.getSelection().removeAllRanges();
    
11.   const tooltip = document.createElement('div');
    
12.   tooltip.classList.add('tooltip');
    
13.   tooltip.innerHTML = '<i class="fa fa-check"></i> 复制成功';
    
14.   document.body.appendChild(tooltip);
    
15. setTimeout(() => {
    
16.     tooltip.remove();
    
17.   }, 2000);
    
18. };
    
19. copyBtn.addEventListener('click', handleCopy);
    

复制代码

css代码：

1. .copy-btn {
   
2.         display: inline-block;
   
3.         padding: 8px 16px;
   
4.         background-color: #007bff;
   
5.         color: #fff;
   
6.         border-radius: 4px;
   
7.         cursor: pointer;
   
8.       }
   
9. 
   
10.       .tooltip {
    
11.         position: fixed;
    
12.         top: 50%;
    
13.         left: 50%;
    
14.         transform: translate(-50%, -50%);
    
15.         background-color: rgba(0, 123, 255, 0.8);
    
16.         color: #fff;
    
17.         padding: 8px 16px;
    
18.         border-radius: 4px;
    
19.         display: flex;
    
20.         align-items: center;
    
21.       }
    
22. 
    
23.       .tooltip i {
    
24.         margin-right: 8px;
    
25.       }
    

复制代码

HTML代码

1. <button class="copy-btn">复制</button>

复制代码