热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制。在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行

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

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


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

第一种

//html部分


//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部分

//js部分
new Clipboard('button');

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

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

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

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

//html部分
 
 
//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




  
  
  


  
  
  
hello

function-text




  
  
  


  
  

  
  

  
  

target-div




  
  
  


  
  hello 123
  

  
  

  
  

target-input




  
  
  


  
  
  

  
  

  
  

target-textarea




  
  
  


  
  
  

  
  

  
  

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


推荐阅读
  • AJAX技术允许网页在不重新加载整个页面的情况下进行异步更新,通过向服务器发送请求并接收JSON格式的数据,实现局部内容的动态刷新。 ... [详细]
  • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
  • 使用原生 AJAX 处理文件下载与 IE 浏览器图片显示问题
    本文探讨了如何利用原生 AJAX 实现文件的 POST 或 GET 请求下载,并监控下载状态。同时,针对 IE 浏览器及部分移动设备浏览器因路径问题导致图片无法正常显示的情况,提供了有效的解决方案。 ... [详细]
  • 微信PC版1.2更新:支持自定义公众号菜单与多项新功能
    微信桌面应用程序最新版本1.2 for Windows现已发布,新增了保存聊天记录、使用公众号自定义菜单、同步手机表情等多项实用功能。 ... [详细]
  • 本文详细介绍了ASP.NET缓存的基本概念和使用方法,包括输出缓存、数据缓存及其高级特性,如缓存依赖、自定义缓存和缓存配置文件等。通过合理利用这些缓存技术,可以显著提升Web应用程序的性能。 ... [详细]
  • 深入解析进程、线程与协程的关系及差异
    本文详细探讨了进程、线程和协程这三个概念的基本定义、功能特点以及它们之间的相互关系。通过对比分析,帮助读者更好地理解这三种并行计算模型在实际应用中的选择与运用。 ... [详细]
  • 免费获取:全面更新的Linux集群视频教程及配套资源
    本资源包含最新的Linux集群视频教程、详细的教学资料、实用的学习课件、完整的源代码及多种软件开发工具。百度网盘链接:https://pan.baidu.com/s/1roYoSM0jHqa3PrCfaaaqUQ,提取码:41py。关注我们的公众号,获取更多更新的技术教程。 ... [详细]
  • 我有这种ajax$.ajax({type:"POST",url:"bee_sesi_edit.php&# ... [详细]
  • 深入理解Django中的AJAX应用
    本文详细介绍了AJAX技术及其在Django框架中的应用。AJAX,即异步JavaScript和XML,允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。 ... [详细]
  • PHP 实现数据库数据处理并实时更新客户端状态
    本文介绍了使用 PHP 处理数据库中的数据,并在每次处理后实时向客户端反馈当前状态的方法。适合需要监控数据处理进度的应用场景。 ... [详细]
  • 本文档将指导您如何下载并安装微信Web开发者工具,以及如何利用此工具进行微信网页授权的调试。此外,还将介绍如何使用该工具模拟JSSDK权限校验及移动设备调试等功能。 ... [详细]
  • 本文详细探讨了成为一名合格的初级Java工程师所需掌握的知识体系,以及从初级到中级乃至高级工程师的成长路径和职业发展前景。 ... [详细]
  • 深入解析Axios与jQuery的核心差异
    本文详细对比了Axios与jQuery在Web前端开发中的应用,探讨两者在异步请求处理、数据封装及请求方式上的不同之处。 ... [详细]
  • DWR(Direct Web Remoting)是一个用于简化Web应用中JavaScript与Java服务器端交互的Ajax库。本文通过一个简单的示例,展示如何使用DWR框架实现基本的Ajax功能。 ... [详细]
  • jQuery 1.4.4 已经发布,这是自 1.4.3 版本以来不到一个月的又一更新。本次更新主要集中在基于用户反馈的错误修复,并引入了一项新的功能。 ... [详细]
author-avatar
mobiledu2502922985
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有