• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript之clipboard用法详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

(1)介绍:

clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中
clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;

(2)clipboard复印内容的方式有

  1. 从target复印目标内容
  2. 通过function 要复印的内容
  3. 通过属性返回复印的内容

target复印目标内容,这里不说,就说一下function和属性的操作。

(3)Function操作有两种:

第一种:

通过target的function复印内容
通过target指定要复印的节点,这里返回舒值是‘hello'

   <button class="btn">Copy_target</button>
   <div>hello</div>

   <script>
   var clipboard = new Clipboard('.btn', {
   // 通过target指定要复印的节点
       target: function() {
                  return document.querySelector('div');
             }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
   });
   </script>

第二种:

通过text的function复印内容
text的function指定的复印内容,这里返回‘to be or not to be'

<button class="btn">Copy</button>
<script>
   var clipboard = new Clipboard('.btn', {
   // 点击copy按钮,直接通过text直接返回复印的内容
       text: function() {
           return 'to be or not to be';
       }
   });

   clipboard.on('success', function(e) {
       console.log(e);
   });

   clipboard.on('error', function(e) {
       console.log(e);
});

(4)通过属性返回复印的内容

第一种: 单节点

通过id指定节点对象,并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容

// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>
 
<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>

第二种: 多节点

通过class获取所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3

//   通过class注册多个button,获取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

(5)函数和属性的兼容方式

函数:

//ClipboardJS.isSupported()  //--------这句为:是否兼容
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后,手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
    alert('复制成功!')
    e.clearSelection();
});
clipboard.on('error', function(e) {
    alert('请选择“拷贝”进行复制!')
//尝试去掉alert,能弹出系统的“拷贝”工具,但是需要点击两次按钮才能弹出,具体原因还不清楚,参考上图。有人说可以试一下在触发的地方写一个空点击事件, οnclick="" 因为ios不单纯支持on事件
}); 

属性:

<img
   src="../../../../assets/images/zuop_award/copy_link.png"
      @click="copy"
      data-clipboard-action="copy"
      class="email"
      :data-clipboard-text="'[email protected]'"
    /> 

-------------------
  copy() {
     var clipboard = new Clipboard(".email")
     // console.log(clipboard);
     clipboard.on("success", e => {
       // console.log("复制成功", e);
       Toast({
         message: "复制成功"
       })
       // 释放内存
       clipboard.destroy()
     })
     clipboard.on("error", e => {
       // 不支持复制
       Toast({
         message: "手机权限不支持复制功能"
       })
       console.log("该浏览器不支持自动复制")
       // 释放内存
       clipboard.destroy()
     })
   }

到此这篇关于JavaScript之clipboard用法详解的文章就介绍到这了,更多相关JavaScript之clipboard内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js实现简单的前端分页效果发布时间:2022-02-05
下一篇:
微信公众号录音文件的播放与保存(amr文件转mp3)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap