一键复制到剪切板功能(支持web和微信)

前言:最近在作微信返利服务号,直接返回淘口令文本消息怕被封。因而打算改为图文消息的形式,那么问题就来了,怎么让用户更简单的进行淘口令复制呢?bash

Clipboard.js

使用方法,几行代码搞定

data-clipboard-target 指定要复制的标签 data-clipboard-action 指定事件copy 或 cut微信

<p id="tkl" th:text="'长按复制本条信息('+${tkl}+')打开手淘下单便可!'" style="text-align: center; "></p>
<button id="btn" data-clipboard-target="#tkl" data-clipboard-action="copy"
        class="btn btn-success" style="text-align: center;width: 100%">
    一键复制
</button>

$(document).ready(function () {
   let clipboard = new ClipboardJS('.btn');
   clipboard.on('success', function (e) {
       console.log(e);
       document.getElementById('btn').innerHTML = '复制成功';
   });
});
复制代码

遇到的问题

一开始从网上看到的教程结果出现这个问题。ReferenceError: Clipboard is not definedui

缘由:一开始的写法let clipboard = new Clipboard('.btn');spa

最后推荐一下个人公众号,淘宝购物返现用

相关文章
相关标签/搜索