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

方法一：原生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

```ruby
  $(".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);
    })