原生js/jQuery实现点击复制文字功能

  // 方法一：原生js
    // var lis = document.querySelectorAll('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function () {
    //         let str = lis[i].innerHTML; //拿到li标签内的文本
    //         let input = document.createElement("input"); //新建一个input
    //         input.setAttribute("value", str); //给input赋默认值
    //         document.body.appendChild(input); //放入document
    //         input.select(); //选中输入框的文本，目前只有input和textarea支持,注意要复制的标签不能隐藏(display: none;)
    //         document.execCommand("Copy"); //执行document的复制
    //         input.remove(); //用完就扔
    //         //------------------------------------------------------
    //         // 如果需要提示语
    //         let div = document.createElement("div"); //提示语div
    //         div.setAttribute("style",
    //             "position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 12px 25px;background: rgba(0, 0, 0, 0.6); color: #fff;font-size: 14px;"
    //         ); //提示语div的样式
    //         div.innerHTML = "复制成功" //提示语的文字
    //         document.body.appendChild(div); //放入document
    //         setTimeout(() => {
    //             div.remove(); //用完就扔
    //         }, 1000);
    //     }
    // }
    
    //方法二：jQuery

    $(".main").on("click", "li", function () {
        let str = $(this).text(); //拿到li标签内的文本
        let input = `<input type="text" id="temp" value="${str}">`;
        $("body").append(input); //放入document
        $("#temp").select(); //选中输入框的文本，目前只有input和textarea支持,注意要复制的标签不能隐藏(display: none;)
        document.execCommand("Copy"); //执行document的复制
        $("#temp").remove(); //用完就扔
        // 如果需要提示语
        let div =
            `<div id="tip" style="position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 12px 25px;background: rgba(0, 0, 0, 0.6); color: #fff;font-size: 14px;">复制成功</div>`; //提示语div
        $("body").append(div); //放入document
        setTimeout(() => {
            $("#tip").remove(); //用完就扔
        }, 1000);
    })