js实现复制input隐藏域的取巧做法

JS实现列表链接复制的取巧办法
工作中需在列表每行设复制按钮,复制隐藏的链接。经查找,找到取巧办法:在页面写隐藏域存值,用JS获取值后创建新input,通过透明度隐藏并赋值,复制后移除该input。此方法未做浏览器适配。

一、需求

工作中有个小需求,在一个列表中,每一行都有一个复制按钮,用来复制每一条记录中的链接,这个链接不需要在页面中展示,所以需要做成隐藏域。

在网上查了一些资料,有的需要引入第三方js,感觉只是一个简单的复制,没有十分必要去要引用这么一个文件,所以查找一番之后,找到了一个取巧的办法。注意:该方法没有做浏览器的适配,所以遇到这方问题的,可以再查找其他资料以完善功能~~~

二、做法

1、思路

a、在页面中写一个隐藏域,存放需要复制的值

b、js中获取隐藏域的值,并创建一个新的input,通过透明度隐藏,并赋值。复制之后,移除创建的input

2、页面

<input type="hidden" class="copy_content" value="${activity.activityUrl != null ? activity.activityUrl : ''}">
<a class="inTableBtn" href="javascript:void(0);" onclick="copyContentToClip(this)">复制链接</a>

3、js

function copyContentToClip(_this) {
    var oInput = document.createElement('input');
    if($(_this).siblings(".copy_content").val()) {
        oInput.value = $(_this).siblings(".copy_content").val();
        $(oInput).css({opacity:'0'})
        $(oInput).attr({name:"copy_content"})
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        $("input[name='copy_content']").remove()
        layer.msg('复制成功');
    }else {
        layer.msg('没有url地址');
    }
}

这一部分代码是引用其他码友的,附上原文地址:https://www.cnblogs.com/shuihanxiao/p/10482136.html

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值