全网最全h5调用剪切板方法亲测可用

废话少说:上代码!

textarea id="bar">这里的文本可被复制或者剪切</textarea>
<div style="text-align: center;" class="floating-button">
    <button class="van-button van-button--info van-button--normal van-button--round" id="wechatId"
            data-clipboard-action="cut" data-clipboard-target="#bar"
            style="width: 6rem; height:1.5rem;color: white;
                 background: linear-gradient(to right, #FF6666, rgb(245, 154, 35)); border: 0px;"
                  onclick="wechatOpen()">
        <div class="van-button__content"><span class="van-button__text" >复制微信打开</span></div></button>
    <button class="van-button van-button--info van-button--normal van-button--round"
            style="margin-left: 2rem; width: 6rem; height:1.5rem;color: white; background: linear-gradient(to right, #FF6666, rgb(245, 154, 35)); border: 0px;"
            onclick="rediretOpen()">
        <div class="van-button__content"><span class="van-button__text" >直接打开</span></div></button>
</div>
<script>
    var basePath ='/wechatTest';

    $(document).ready(function (){

        //4. 实例化clipboard
        var clipboard = new ClipboardJS('#wechatId');
        //5. 复制成功的响应事件【按F12控制台可见】
        clipboard.on('success', function (e) {
            console.log(e);
            //打印动作信息(copy或者cut)
            console.info('Action:', e.action);
            //打印复制的文本
            console.info('Text:', e.text);
            //打印trigger
            console.info('Trigger:', e.trigger);
        });

        //6. 复制失败的响应事件
        clipboard.on('error', function (e) {
            console.log(e);
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    });

    /**
     * 微信打开
     */
   function wechatOpen() {
        // 调用截切版
        copyText("这是需要复制的文本");
   }
    function copyToClipboard(text) {
        var $tempInput = $("<input>");
        $("body").append($tempInput);
        $tempInput.val(text).select();

        try {
            var successful = document.execCommand("copy");
            var msg = successful ? "复制成功" : "复制失败";
            console.log(msg);
            window.location.href = "weixin://";
        } catch (err) {
            console.error("复制失败: ", err);
        }

        $tempInput.remove();
    }

    function copyText(text) {
        var clipboard = navigator.clipboard;
        clipboard.writeText(text);
        console.log("文本已复制到剪贴板。");
        window.location.href = "weixin://";
    }



    /**
     * 手机浏览器打开
     */
   function rediretOpen() {

   }
</script>

这其中 用了 三种方法 ,只有引用使用 ClipboardJS  引入外部库才可以,

1, 最老版本 document.execCommand("copy");  已经被淘汰了,而且测试还不好用!

2,下边这种是要vue安装的,有环境限制,像我中原生党不行!!!

var clipboard = navigator.clipboard;
  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值