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

最新推荐文章于 2022-10-10 00:25:04 发布

原创最新推荐文章于 2022-10-10 00:25:04 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js复制文本

javascript 专栏收录该内容

2 篇文章

订阅专栏

工作中需在列表每行设复制按钮，复制隐藏的链接。经查找，找到取巧办法：在页面写隐藏域存值，用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