一、需求
工作中有个小需求,在一个列表中,每一行都有一个复制按钮,用来复制每一条记录中的链接,这个链接不需要在页面中展示,所以需要做成隐藏域。
在网上查了一些资料,有的需要引入第三方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