使用clipboard.js实现复制功能的示例代码

站长资源 2024/11/27 佚名

36 1538 36

DDR爱好者之家 Design By 杰米

最近在工作中有一个需求，就是需要使用一个按钮实现相应内容的复制。在网上找了很多解决方案，最后对比之下选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架，而且体积小使用简单兼容性也好。下面简单介绍一下它的用法。

引入插件，可以下载，也可以使用第三方cdn。

对于HTML来说，我们有两种用法。

第一种

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target='#copyValue'>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

说明：如果我们使用按钮复制的是另一个元素的内容，则我们可以使用这种方法。此时将按钮称为触发元素，被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器，而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象，参数可以是HTML元素，元素选择器。有success和error两个事件可以供我们监听，实现自己的逻辑。因为复制完成后，目标元素会处于选中状态，所以我们需要e.clearSelection()取消目标元素的选中状态。
优点：复制的内容可以是动态的，目标元素的值发生变化，复制的值也发生变化。

适用场景：复制内容可变，不固定。

第二种

//html部分
<button type="button" data-clipboard-text='复制内容'>复制</button>
//js部分
new Clipboard('button');

说明：data-clipboard-text的值为你要复制的内容。无目标元素，只有触发元素。

缺点：复制的内容是静态的，不变的，提前设置好的。

适用场景：复制内容固定不变

对于以上缺点，我们可以优化如下，使之复制的内容也是动态的。

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
 alert('复制成功');
 });
 clipboard.on('error', function (e) {
 alert('复制失败');
 });
})

接着这里晒出最常用的几种方式，以供不时之需。

function-target

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>function-target</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <button class="btn">Copy</button>
  <div>hello</div>

  <!-- 2. Include library -->
  <script src="/UploadFiles/2021-04-02/clipboard.min.js">

function-text


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>function-text</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <button class="btn">Copy</button>

  <!-- 2. Include library -->
  <script src="/UploadFiles/2021-04-02/clipboard.min.js">

target-div


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-div</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <span class="copy_content">hello 123</span>
  <button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button>

  <!-- 2. Include library -->
  <script src="/UploadFiles/2021-04-02/clipboard.min.js">

target-input


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-input</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <input id="foo" type="text" value="hello">
  <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

  <!-- 2. Include library -->
  <script src="/UploadFiles/2021-04-02/clipboard.min.js">

target-textarea


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-textarea</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!-- 1. Define some markup -->
  <textarea id="bar">hello</textarea>
  <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

  <!-- 2. Include library -->
  <script src="/UploadFiles/2021-04-02/clipboard.min.js">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    clipboard.js实现复制,clipboard.js复制 
                                DDR爱好者之家 Design By 杰米
                            
                        
                        
                            
                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        
                            
                                
                                    上一篇
                                    Vue2.0父子组件传递函数的教程详解
                                
                            
                            
                                
                                    下一篇
                                    requireJS模块化实现返回顶部功能的方法详解
                                
                            
                        
                        
                        DDR爱好者之家 Design By 杰米
                        
                            
                                
                                
                                    评论“使用clipboard.js实现复制功能的示例代码”
                                
                            
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                
                                                
                                                    
                                                
                                                
                                                    
                                                    
                                                    
                                                
                                                
                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无评论...

更新日志

2024年11月27日

搜索

关键字搜索

使用clipboard.js实现复制功能的示例代码

Vue2.0父子组件传递函数的教程详解

requireJS模块化实现返回顶部功能的方法详解

评论“使用clipboard.js实现复制功能的示例代码”

更新日志

友情链接