兼容所有人类使用浏览器的操作用户剪贴板的js

在后台各种数据列表中,有时候我们需要去让用户点击一个按钮
然后就去操纵用户的剪贴板,例如商品列表的链接

clipboard是一个非常简单易用,并且只有几kb大小的操纵用户剪贴板的js

用法很简单,给需要点击的按钮一个类
然后给这个按钮加上data-clipboard-text属性,属性的值就是为要复制的值
然后我们在js里new Clipboard('.按钮的类名'); 就可以完成点击就复制按钮属性data-clipboard-text的值的功能
但是为了用户体验,我们还需要给用户一个提示,告诉他已经复制成功了

layui的layer是一款非常好用的弹出层插件
可以很方便的给用户弹提示信息

在线js引用

<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script src="https://cdn.nikm.cn/js/clipboard.js"></script>
<script src="https://cdn.nikm.cn/js/layui/layui.js"></script>

demo如下

<body>
    <button class="url" data-clipboard-text="https://www.baidu.com">测试1</button>
    <button class="url" data-clipboard-text="https://www.baidu.com">测试2</button>
    <button class="url" data-clipboard-text="https://www.baidu.com">测试3</button>
    <button class="url" data-clipboard-text="https://www.baidu.com">测试4</button>
    <button class="url" data-clipboard-text="https://www.baidu.com">测试5</button>
</body>
<script src="https://cdn.nikm.cn/js/jquery.js"></script>
<script src="https://cdn.nikm.cn/js/clipboard.js"></script>
<script src="https://cdn.nikm.cn/js/layui/layui.js"></script>
<script>
    $(function(){
        new Clipboard('.url');
        layui.use(['layer'], function(){
          var layer = layui.layer;
        });
    })
    $('.url').click(function(){
        layer.msg('复制成功');
    })
</script>
Last modification:August 19th, 2019 at 02:11 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

简爱博客