js實現複製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