js原生实现复制

1:非input框的复制方式

动态创建input元素的方式实现复制
  copyCode: function (val,e) {
       let input = document.createElement('input');
        input.setAttribute('readonly', 'readonly');//可设可不设
        input.setAttribute('value', val);
        //input.style.display='none'; 此处设置会影响复制功能,不能使用 
        input.className='fixed-class';//解决滚动条滚动的情况
        document.body.appendChild(input);
        input.focus();//选中前必须要focus
        input.setSelectionRange(0, val.length);//选中的取值范围(全选)
        //或者 input.setSelectionRange(0, -1); 全选
        if (document.execCommand('copy')) {//判断是否存在该api;true为存在,false为不存在
            document.execCommand('copy');//复制成功
            console.log('复制成功');
        }
          document.body.removeChild(input);
    }

2:input框的复制方式

var obj= document.getElementById("demo");//选中该input元素
obj.select(); //全选
// 或者  input.setSelectionRange(0, -1)
document.execCommand("copy");

推荐第一种方法;另外第一种方法可能会出现滚动条直接到底的情况,解决办法是为创建的元素添加一个固定定位的class即可解决;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值