复制文本功能兼容 微信ios 火狐浏览器

1.话不多说先来个小漩涡
2.微信ios 火狐不兼容document.execCommand(“copy”); // 执行浏览器复制命令
3.解决方案

<div id="twoLivecode" v-if="copyBox">
      <p id="text"> {{twoLivecode}}</p>
      <textarea id="input">这是幕后黑手</textarea>
      <van-button style="width: 20%;margin: 0 auto" type="primary" size="small" @click="copy">复制</van-button>
    </div>
<style>

.wrapper {position: relative;}
  #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>


//函数方法调用


copy(){
        var text = document.getElementById("text").innerText;
        var input = document.getElementById("input");
        // input.value = text; // 修改文本框的内容
        // input.select(); // 选中文本
        // document.execCommand("copy"); // 执行浏览器复制命令
        // alert("复制成功");
        this.copyText(text)
      },

      copyText(text) {
        //console.log(text)
        // 数字没有 .length 不能执行selectText 需要转化成字符串
        const textString = text.toString();
        let input = document.querySelector('#input');
        input.value = textString;
        // ios必须先选中文字且不支持 input.select();
        selectText(input, 0, textString.length);
        //console.log(document.execCommand('copy'), 'execCommand');
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          alert('已复制到粘贴板');
        }
        input.blur();
        // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
        // 选择文本。createTextRange(setSelectionRange)是input方法
        function selectText(textbox, startIndex, stopIndex) {
          if (textbox.createTextRange) {//ie
            const range = textbox.createTextRange();
            range.collapse(true);
            range.moveStart('character', startIndex);//起始光标
            range.moveEnd('character', stopIndex - startIndex);//结束光标
            range.select();//不兼容苹果
          } else {//firefox/chrome
            textbox.setSelectionRange(startIndex, stopIndex);
            textbox.focus();
          }
        }
      }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值